当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery Validate 插件验证基本使用方法及注意事项详解（代码实例）

jQuery Validate 插件验证基本使用方法及注意事项详解（代码实例）

2018年10月15日 | 移动技术网IT编程 | 我要评论

jquery validation.js 验证使用方法实例

1、修改错误信息位置的方法。

errorplacement: function(error, element){  
          error.appendto(element.parents("td"));  
  
      },

2、修改错误信息的标签

errorelement: "span",

3、修改正确信息

success: function(element) {  
          //正确时的样式  
          element.text("正确").addclass("success");  
  
        },

4、添加自定义验证方法

例如：

//手机号码验证         
jquery.validator.addmethod("ismobile", function(value, element) {         
    var length = value.length;     
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;     
    return this.optional(element) || (length == 11 && mobile.test(value));         
  
}, "请正确填写您的手机号码");

以下为完整实例

<!doctype html>  
<html chartset='utf-8'>  
<head>  
    <title>validate验证</title>  
    <script src="jquery.min.js"></script>  
    <script src="jquery.validate.min.js"></script>  
    <style type="text/css">  
        #register{width: 500px;margin:0 auto;margin-top: 60px;}  
        td{font-size: 14px;}  
        input{width: 260px;height: 30px;border: 1px solid #ccc;padding-left: 6px;}  
        button{width: 266px;height: 32px;line-height: 32px;background: #3e84d7;border: none;color: #fff;}  
        .error{color: red;}  
        input.error{border-color: red;color: #333;}  
    </style>  
</head>  
<body>  
<p id='register'>  
    <form id='myform'>   
        <table>  
            <tr>  
                <td><p><input type="text" name="username" placeholder="用户名"></p></td>  
            </tr>  
            <tr>  
                <td><p><input type="text" id="password" name="password" placeholder="密码"></p></td>  
            </tr>  
            <tr>  
                <td><p><input type="text" name="passwordagain" placeholder="确认密码"></p></td>  
            </tr>  
            <tr>  
                <td><p><input type="text" name="name" placeholder="联系人"></p></td>  
            </tr>  
            <tr>  
                <td><p><input type="text" name="corpname" placeholder="公司名称"></p></td>  
            </tr>  
            <tr>  
                <td><p><input type="text" name="sms" placeholder="手机号"></p></td>  
            </tr>  
            <tr>  
                <td><p><input type="text" name="usercode" placeholder="手机验证码"></p></td>  
            </tr>  
            <tr>  
                <td><p><button type="submit">注册</button></p></td>  
            </tr>  
        </table>        
  
  
    </form>  
</p>  
<script>    
$(function(){  
    //调用验证方法  
    initvalidator();  
});  
/**  
 * base代表异步请求的链接  
 */  
function initvalidator(base){  
    $("#myform").validate({  
        submithandler: function(form) {   
                //验证通过调用此方法    
                alert(1);  
            } ,    
        //设置验证规则     
        rules: {  
            /*  
            *注意，当form表单中name的名字有特殊符号时，需要用双引号包裹用户名  
            *例如： input name=user.name时，就需要用""  
            */  
            "username": {  
                required: true  
            },  
            "password": {  
                required: true,  
                rangelength: [6, 12]  
            },  
            "passwordagain": {  
                required: true,  
                rangelength: [6, 12],  
                equalto: "#password"//密码对应框的id  
            },  
            "corpname": {  
                required: true  
            },  
            "name": {  
                required: true  
            },  
            "sms": {  
                required: true,  
                ismobile: true,  
                checksms: true  
            },  
            "usercode": {  
                required: true,  
                checkcode:true  
            }  
        },  
        //设置错误信息    
        messages: {  
            "username": {  
                required: "请输入用户名"  
            },  
            "password": {  
                required: "请输入密码",  
                rangelength: "密码长度为6-12位"  
            },  
            "passwordagain": {  
                required: "请再次输入密码",  
                rangelength: "密码长度为6-12位",  
                equalto: "两次输入密码不相同"  
            },  
            "corpname": {  
                required: "请输入公司名称"  
            },  
            "name": {  
                required: "请输入联系人"  
            },  
            "sms": {  
                required: "请输入手机号码",  
                ismobile: "请输入有效的手机号码",  
                checksms: "手机号码已经存在"  
            },  
            "usercode": {  
                required: "请输入验证码",  
                checkcode:"验证码不正确"  
            }  
        },  
        //修改错误信息的位置  
        errorplacement: function(error, element){  
            error.appendto(element.parents("td"));  
        },  
        //修改错误信息的标签  
        errorelement: "span",  
        //修改正确信息  
        success: function(element) {  
          //正确时的样式  
          element.text("正确").addclass("success");  
        },  
    });     
    //异步验证手机号码  
    jquery.validator.addmethod("checksms", function(value, element){  
        var result = false;  
        // 设置同步  
        $.ajaxsetup({  
            async: false  
        });  
        var param = {  
            sms: value  
        };  
        $.post(base + "/checksms.do", param, function(data){  
            result = (0 == data);  
              
        });  
        // 恢复异步  
        $.ajaxsetup({  
            async: true  
        });  
        return result;  
    }, "手机号码已经存在");  
      
    //异步验证验证码  
    jquery.validator.addmethod("checkcode", function(value, element){  
        var result = false;  
        // 设置同步  
        $.ajaxsetup({  
            async: false  
        });  
        var param = {  
            usercode: value  
        };  
        $.post(base + "/checkcode.do", param, function(data){  
            result = (1 == data);  
              
        });  
        // 恢复异步  
        $.ajaxsetup({  
            async: true  
        });  
        return result;  
    }, "验证码不正确");  
};  
/*  
 *自定义验证  
*/  
jquery.validator.addmethod("stringcheck", function(value, element) {         
    return this.optional(element) || /^[\u0391-\uffe5\w]+$/.test(value);         
}, "只能包括中文字、英文字母、数字和下划线");     
    
//中文字两个字节         
jquery.validator.addmethod("byterangelength", 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[0] && length <= param[1] );         
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");     
    
//身份证号码验证         
jquery.validator.addmethod("isidcardno", function(value, element) {         
    return this.optional(element) || isidcardno(value);         
}, "请正确输入您的身份证号码");  
       
//手机号码验证         
jquery.validator.addmethod("ismobile", function(value, element) {         
    var length = value.length;     
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;     
    return this.optional(element) || (length == 11 && mobile.test(value));         
}, "请正确填写您的手机号码");         
       
//电话号码验证         
jquery.validator.addmethod("istel", function(value, element) {         
    var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678     
    return this.optional(element) || (tel.test(value));         
}, "请正确填写您的电话号码");     
    
//联系电话(手机/电话皆可)验证     
jquery.validator.addmethod("isphone", function(value,element) {     
    var length = value.length;     
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;     
    var tel = /^\d{3,4}-?\d{7,9}$/;     
    return this.optional(element) || (tel.test(value) || mobile.test(value));     
    
}, "请正确填写您的联系电话");     
       
//邮政编码验证         
jquery.validator.addmethod("iszipcode", function(value, element) {         
    var tel = /^[0-9]{6}$/;         
    return this.optional(element) || (tel.test(value));        
}, "请正确填写您的邮政编码");   
</script>  
  
  
</body>  
</html>

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

天猫店群操作，实操细节注意事项，纯干货！

天猫店群操作，实操细节注意事项，纯干货！大家好，我是电商火火，团队自运营两百家天猫店。做店群的基本上都知道淘宝京... [阅读全文]
OpenGL入门详解(3.OpenGL基本流程)

看了不少的OpenGL书或者文章，有如下特征上来就是一堆代码，看的莫名其妙；上来就是很片面的介绍概念，看了也不知... [阅读全文]
甜品消消乐 02 甜品的类型枚举、结构体、字典的创建

甜品的类型枚举，结构体，字典的创建（1）枚举类型。// 甜品对象的种类把道具相关用枚举的方式写出来 pub... [阅读全文]
js中全选和全不选

<!DOCTYPE html><html lang="en"><head> ... [阅读全文]
使用无序列表ul实现多级菜单

首先要求后端传来的菜单数据必须包含：id---菜单idpid---父菜单id整体思想：首先渲染出整个菜单（不包含... [阅读全文]
Unity本地Json文件的创建、编辑和读取

文章目录（一）建本地Json文件（二）读取（三）注意（一）建本地Json文件Unity不能创建Json文件，导入... [阅读全文]
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git

2020-07-21 题目来源：http://www.h-camel.com/[html] ... [阅读全文]
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）

续上一小节，我们可以发现每一个grid-cell上的数字初始时并不在格子里。这些数字可以随着玩家的操作而移动我... [阅读全文]
JavaScript：从0到1编写贪吃蛇

游戏截图1.画出游戏界面var c=document.getElementById("myCanvas"); ... [阅读全文]
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件

首先使用yarn或npm安装@angular-builders/custom-webpack，然后安装postc... [阅读全文]

网友评论


验证码：

jQuery Validate 插件 验证基本使用方法及注意事项详解（代码实例）

2018年10月15日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论

jQuery Validate 插件验证基本使用方法及注意事项详解（代码实例）