jquery validate验证

1. 引入jquery

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

2.写js验证 

<script>
$("#form-member-add").validate({
            rules:{
                username:{
                    required:true,
                    minlength:2,
                    maxlength:16
                },
                password:{
                    required:true,
                    minlength:6,
                },
                password_confirmation:{
                    required:true,
                    minlength:6,
                    equalTo: "#password"
                },
                phone:{
                    required:true,
                    isMobile:true,
                },
            },
            onkeyup:false,
            focusCleanup:false,
            success:"valid",
            submitHandler:function(form){

                表单提交
            }
        });
</script>

3.html文件

<form action="提交地址" method="post" class="form form-horizontal" id="form-member-add">
        @csrf
        <div class="row cl">
            <div class="formControls col-xs-8 col-sm-9">
                用户名
                <input type="text" class="input-text" value="" placeholder="" id="username" name="username">
            </div>
        </div>
        
        <div class="row cl">
            <div class="formControls col-xs-8 col-sm-9">
                密码
                <input type="password" class="input-text" value="" placeholder="" id="password" name="password">
            </div>
        </div>
        <div class="row cl">
            <div class="formControls col-xs-8 col-sm-9">
                校验密码
                <input type="password" class="input-text" value="" placeholder="" id="password_confirmation" name="password_confirmation">
            </div>
        </div>
        <div class="row cl">
            <div class="formControls col-xs-8 col-sm-9">
                手机
                <input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>

效果图

4.这里的表单提交有2种

1:ajax提交

<script>
//表示捕获form表单中的所有值,采用ajax方式提交，路由则是form中action的值
 
$("#form-member-add").validate({
        // 规则
        rules: {
          // 表单元素名称,也就是name的值
          username: {
            // 验证规则
            //不能为空
            required: true,
            //最小两位
            minlength: 2
          }
        },
        messages: {
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个以上字符组成"
          }
        },
        submitHandler: function(form) {      
          $(form).ajaxSubmit({
            //如果不加datatype是无法接收到回调内容
            datatype:'JSON',
            success: function (res) {
                //console.log(res)
                if (res.code == 200){
                    parent.location.reload();
                }
            }
          });     
       } 
})
 
</script>

2：表单同步提交

<script>
//表示捕获form表单中的所有值,采用同步方式提交，路由则是form中action的值
 
$("#form-member-add").validate({
        // 规则
        rules: {
          // 表单元素名称,也就是name的值
          username: {
            // 验证规则
            //不能为空
            required: true,
            //最小两位
            minlength: 2
          }
        },
        messages: {
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个以上字符组成"
          }
        },
        submitHandler: function (form) {
          // 同步表单提交
          form.submit();
        }
})
</script>

5.自定义验证手机号 validate 里面没有直接验证手机号格式的 需要自己定义 在需要验证手机号的时候 phone:true  即可验证

      // 自定义验证规则
      // 手机号验证
      jQuery.validator.addMethod("phone", function (value, element) {
        // patrn = /^(\+86-)?1[3-9]\d{9}$/;
        var reg1 = /^\+86-1[3-9]\d{9}$/;
        var reg2 = /^1[3-9]\d{9}$/;
        var ret = reg1.test(value) || reg2.test(value);
        return this.optional(element) || ret;
      }, "请输入正确的手机号码");