jquery 的validate的快速入门

这几天用jq的validate做了个表单验证，发现有很多细节问题，接下来跟大家分享一下。

• 首先在头部引入jquery和jquery.validate.min.js；
  jquery.validate.min.js传送门
• 接下来，是表单dom；

html代码

<form id="regForm" action="">
            <div class="username">
                <label><i>*</i>用户名：</label>
                <input id="username" name="username" type="text" placeholder="请输入用户名">
                <div class="errors"></div>
            </div>
            <div class="linker">
                <label><i>*</i>联系人：</label>
                <input id="linker" name="linker" type="text" placeholder="请输入公司全称">
                <div class="errors"></div>
            </div>
            <div class="password">
                <label style="margin-left: 67px;"><i>*</i>登录密码：</label>
                <input id="password" name="password" type="password">
                <div class="errors"></div>
            </div>
            <div class="password-again">
                <label style="margin-left: 67px;"><i>*</i>确认密码：</label>
                <input id="passwordAgain" name="passwordAgain" type="password">
                <div class="errors"></div>
            </div>
            <div class="phoneNum">
                <label style="margin-left: 67px;"><i>*</i>手机号码：</label>
                <input id="phoneNum" name="phoneNum" type="text">
                <div class="errors"></div>
            </div>
            <div class="validate">
                <div style="overflow: hidden;">
                    <label style="float: left;margin-left: 89px;"><i>*</i>验证码：</label>
                    <input style="float: left;width: 75px;" id="validate" name="validate" type="text">
                    <div style="float: left;" style="" id="img"></div>
                </div>
                <div class="errors"></div>
            </div>
            <div class="phoneValidate">
                <label style="margin-left: 51px;"><i>*</i>手机验证码：</label>
                <input id="phoneValidate" name="phoneValidate" type="text">
                <div class="errors"></div>
                <button style="margin-left: 148px;outline: none;cursor: pointer;" class="messageButton">获取短信验证码</button>
            </div>
            <div class="upload">
                <label style="margin-left: 51px;"><i>*</i>上传营业执照：</label>
                <input style="margin-left: 61px;margin-top: 14px;" type="file">
            </div>
            <div class="submit">
                <input type="submit" value="注册">
            </div>
        </form>

js代码

 //validator初始化
        $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });
        //进行自定义配置
    $("#regForm").validate({
        //这里写匹配规则
        rules: {
            username:{
                required: true,
                minlength: 2
            },
            password:{
                required: true,
                minlength: 6,
                maxlength: 16
            },
            passwordAgain:{
                required: true,
                equalTo: "#password"
            },
            phoneNum:{
                required: true,
                rangelength:[11,11]
            },
            linker:{
                required:true
            },
            validate:{
                required:true
            },
            phoneValidate:{
                required:true
            }
        },
        //这里写规则匹配后的警告内容
        messages:{
            username:{
                required: "用户名不能为空",
                minlength: "用户名的最小长度为2"
            },
            password:{
                required: "密码不能为空",
                minlength: "密码长度不能少于6个字符",
                maxlength: "密码长度不能超过16个字符"
            },
            passwordAgain:{
                required: "确认密码不能为空",
                equalTo: "确认密码和密码不一致"
            },
            phoneNum:{
                required: "手机号码不能为空",
                rangelength:"手机号码必须为11位"
            },
            linker:{
                required:"联系人不能为空"
            },
            validate:{
                required:"验证码不能为空"
            },
            phoneValidate:{
                required:"手机验证码不能为空"
            }
        },
        errorPlacement: function(error, element) { //错误信息位置设置方法
error.appendTo( element.parent().find('.errors') ); //这里的element是录入数据的对象
}
    });

• 这里要说的是errorPlacement这个函数，这里是错误信息出现的位置。插件默认是和input同行显示，由于需求，我将他放到了一个.errors盒子里。
  最后，放上css代码。

css代码

#regForm{
    width: 360px;
    height: 520px;
    background-color:#fff;
    border-radius: 20px;
    margin-top: 20px;
}
#regForm .errors{
    height: 22px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 71px;
}
#regForm>div .error{
    font-size: 14px;
    font-family: 微软雅黑;
    color: red;
}
#regForm>div label{
    font-family: 微软雅黑;
    font-size: 14px;
    margin-left: 80px;
}
#regForm>div label i{
    color: red;
}
#img{
    display: inline-block;
    width: 80px;
    height: 27px;
}
#regForm .messageButton{
    border: none;
    background-color: #ff5537;
    color: white;
    border-radius: 5px;
}
#regForm .submit {
    text-align: center;
    margin-top: 25px;
}
#regForm .submit input{
    width: 150px;
    height: 28px;
    border: none;
    background-color: #ff5537;
    color: #fff;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}
#regForm{
    padding-top: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#Verrors{
    font-size: 14px;
    font-family: 微软雅黑;
    color: red;
    padding-left: 80px;

}

引用

“一个人并不是生来要给打败的。你尽可以消灭他,可就是打不败他。” ————海明威