form表单校验示例

0. 引入js

1. form表单

 <form class="form-horizontal m-t" id="roleAddForm">
               
                <div class="form-group">
                    <label class="col-sm-3 control-label">手机号：</label>
                    <div class="col-sm-8">
                        <input id="phone" name="phone" value="${netbar.phone}" 
                                 class="form-control" type="text">
                        <span class="help-block m-b-none">
                            <i class="fa fa-info-circle"> </i> 这里写点提示的内容
                        </span>
                    </div>
                </div>
             

                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-3">
                        <button class="btn btn-primary" type="submit" id="submit">
                             保存 
                        </button>
                    </div>
                </div>
 </form>

2.jquery 校验

    $(document).ready(function(){
        // 表单验证
        $("#roleAddForm").validate({
            rules:{
                'phone':{
                    required:true,
                    maxlength:11,
                    minlength:11,
                    number:true,
                    vPhone:true
                }
            },
            messages:{
              
                'phone':{
                    required:"请输入手机号",
                    maxlength:"请输入正确的手机号",
                    minlength:"请输入正确的手机号",
                    number:"请输入正确的手机号",
                }
            },
            submitHandler : function(form) {
            	
                $.ajax({
                    type: "POST",
                    async: true,
                    data:$('#roleAddForm').serialize(),
                    url: "",
                    success: function (data) {
                        var jsonData = $.parseJSON(JSON.stringify(data));
                        var index = parent.layer.getFrameIndex(window.name);
                        if (jsonData.status == 0) {
                            parent.$("#layer_status").val(0);
                        } else {
                            parent.$("#layer_status").val(1);
                        }
                        parent.$("#layer_msg").val(jsonData.msg);
                        parent.layer.close(index);
                    }
                });
            }
        });
    });

3.自定义校验规则  

//自定义校验手机号格式
    $.validator.addMethod("vPhone", function(value, element) {
    	  var v_regex=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    	  value=""+value;
    	  if(value){
    	    if(!v_regex.test(value)){
    	      return false;
    	    }else{
    	      return true;
    	    }
    	  }else{
    	    return null;
    	  }
    	}, "请输入正确的手机号");