首页 > Web开发 > 详细

Jquery Validate 表单验证使用

时间:2019-04-25 15:37:16      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:left   分享图片   导入   width   field   latest   基本结构   arc   输入密码   

一、导入 js 库 

jquery-validation-1.14.0

     链接:https://pan.baidu.com/s/1IoHW_HAsbK0NKt5TeNZ6Pg
     提取码:1s6x 

<script src="../jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="../jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
//中文提示包
<script src="../jquery-validation-1.14.0/dist/localization/messages_zh.min.js"></script>

1.1默认校验规则

序号规则描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

1.2默认提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

二、使用方法

基本结构

<script>
$.validator.setDefaults({
    submitHandler: function() {
      //验证正确后调用
      alert("提交事件!");
    }
});

$().ready(function() {
    //界面加载后触发
    validateRule();
});

function validateRule() {
    //表单提交时触发
  $("#signupForm").validate({
        rules: {
          username: "required"  //规则
        },
        messages: {
          username: {
            required: "请输入用户名"  //提示信息
          }
        }
    });
}
</script>
<form class="cmxform" id="signupForm" method="get" action=""> <!--表单代码--> </form>

2.1常规使用

<script>
$.validator.setDefaults({
    submitHandler: function() {
      //验证正确后触发
      alert("提交事件!");
    }
});
    
$().ready(function() {
    //界面加载后触发
    validateRule();
});
          
function validateRule() {
    //表单提交时触发
  $("#signupForm").validate({
        rules: {
          firstname: "required",
          lastname: "required",
          username: {
            required: true,
            minlength: 2
          },
          password: {
            required: true,
            minlength: 5
          },
          confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password"
          },
          email: {
            required: true,
            email: true
          },
          "topic[]": {
            required: "#newsletter:checked",
            minlength: 2
          },
          agree: "required"
        },
        messages: {
          firstname: "请输入您的名字",
          lastname: "请输入您的姓氏",
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个字母组成"
          },
          password: {
            required: "请输入密码",
            minlength: "密码长度不能小于 5 个字母"
          },
          confirm_password: {
            required: "请输入密码",
            minlength: "密码长度不能小于 5 个字母",
            equalTo: "两次密码输入不一致"
          },
          email: "请输入一个正确的邮箱",
          agree: "请接受我们的声明",
          topic: "请选择两个主题"
        }
    });
}
</script>
<style>
.error{
    color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意:如果没有勾选“我乐意接收新信息”以下选项会隐藏,但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you‘d like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>

2.2自定义规则使用

addMethod(name,method,message)方法

参数 name 是添加的方法的名字。

参数 method 是一个函数,接收三个参数 (value,element,param) 。

value 是元素的值,element 是元素本身,param 是参数。

<script>
$.validator.setDefaults({
    submitHandler: function() {
      //验证正确后调用
      alert("提交事件!");
    }
});
    
$().ready(function() {
    //界面加载后触发
    validateRule();
});
    
    //自定义 "checkname" 校验方法
$.validator.addMethod("checkname", function (value, element, params) {
    var checkname = /^[\u4e00-\u9fa5]{1,6}$/;
    return this.optional(element) || (checkname.test(value));
});
    
/**
//也可以这样写,可以不用再在messages里写信息了
$.validator.addMethod("checkname", function (value, element, params) {
    var checkname = /^[\u4e00-\u9fa5]{1,6}$/;
    return this.optional(element) || (checkname.test(value));
}, $.validator.format("请输入1-6位中文字符"));
 **/
    
function validateRule() {
    //表单提交时触发
  $("#signupForm").validate({
        rules: {
          username: {
            required: true,
            checkname:true
          }
        },
        messages: {
          username: {
            required: "请输入用户名",
       checkname:"请输入1-6位中文字符"
          }
        }
    });
}
</script>
<style>
.error{
    color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
    <p>
      <label for="username">名字</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
</form>
</body>

2.3收集的一些规则 

身份证号码验证

jQuery.validator.addMethod("idcardno", function(value, element) {
            return this.optional(element) || isIdCardNo(value);
        }, "请正确输入身份证号码");

字母数字

jQuery.validator.addMethod("alnum", function(value, element) {
            return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
        }, "只能包括英文字母和数字");

 邮政编码验证

jQuery.validator.addMethod("zipcode", function(value, element) {
            var tel = /^[0-9]{6}$/;
            return this.optional(element) || (tel.test(value));
        }, "请正确填写邮政编码");

汉字

jQuery.validator.addMethod("chcharacter", function(value, element) {
            var tel = /^[u4e00-u9fa5]+$/;
            return this.optional(element) || (tel.test(value));
        }, "请输入汉字");

字符最小长度验证(一个中文字符长度为2)

技术分享图片
jQuery.validator.addMethod("stringMinLength", function(value, element, param) {
            var length = value.length;
            for(var i = 0; i < value.length; i++) {
                if(value.charCodeAt(i) > 127) {
                    length++;
                }
            }
            return this.optional(element) || (length >= param);
        }, $.validator.format("长度不能小于 { 0 }!"));
技术分享图片

字符最大长度验证(一个中文字符长度为2)

技术分享图片
jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {
            var length = value.length;
            for(var i = 0; i < value.length; i++) {
                if(value.charCodeAt(i) > 127) {
                    length++;
                }
            }
            return this.optional(element) || (length <= param);
        }, $.validator.format("长度不能大于 { 0 }!"));
技术分享图片

字符验证

jQuery.validator.addMethod("string", function(value, element) {
            return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
        }, "不允许包含特殊符号!");

手机号码验证

jQuery.validator.addMethod("mobile", function(value, element) {
            var length = value.length;
            return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value));
        }, "手机号码格式错误!");

电话号码验证

jQuery.validator.addMethod("phone", function(value, element) {
            var tel = /^(d{3,4}-?)?d{7,9}$/g;
            return this.optional(element) || (tel.test(value));
        }, "电话号码格式错误!");

必须以特定字符串开头验证

jQuery.validator.addMethod("begin", function(value, element, param) {
            var begin = new RegExp(" ^ "+param);
            return this.optional(element) || (begin.test(value));
        }, $.validator.format("必须以 { 0 } 开头!"));

 验证两次输入值是否不相同

jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
            return value != $(param).val();
        }, $.validator.format("两次输入不能相同!"));

 验证值不允许与特定值等于

jQuery.validator.addMethod("notEqual", function(value, element, param) {
            return value != param;
        }, $.validator.format("输入值不允许为 { 0 }!"));

验证值必须大于特定值(不能等于)

jQuery.validator.addMethod("gt", function(value, element, param) {
            return value > param;
        }, $.validator.format("输入值必须大于 { 0 }!"));

小数点前最多9位,小数点后最多6位

jQuery.validator.addMethod("decimal", function (value, element) {
    return this.optional(element) || /^([1-9]\d{0,8}|0)(\.\d{1,6})?$/.test(value);
}, "小数点前最多9位,小数点后最多6位^_^");

结束时间不能小于开始时间

jQuery.validator.addMethod("laterTo", function (value, element, param) {
    return $(param).val().split("-").join("") < $(element).val().split("-").join("");
}, "结束时间不能小于开始时间^_^");

 

Jquery Validate 表单验证使用

标签:left   分享图片   导入   width   field   latest   基本结构   arc   输入密码   

原文:https://www.cnblogs.com/superslow/p/10768635.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号