jquery-validate格式验证（包括重名验证）

最新推荐文章于 2021-11-20 13:19:10 发布
最新推荐文章于 2021-11-20 13:19:10 发布
阅读量2.1k 收藏 3
点赞数
文章标签： 转载自httpblog.csdn.net

引入jQuery-1.7.1.js和jquery.validate.js两个js文件

jquery.validate.js下载地址：http://download.csdn.net/detail/kingcruel/6557335

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title></title>  
    <script src="Scripts/jquery-1.7.1.js"></script>  
    <script src="Scripts/jquery.validate.js"></script>  
    <script>  
        $().ready(function () {  
  
            ///自定义ajax验证  
            jQuery.validator.addMethod("ExistsCompany", function (value, element) {    //用jquery ajax的方法验证电话是不是已存在   
                var flag = 1;  
                $.ajax({  
                    type: "POST",  
                    url: '/CustomerMonkey/ExistsCompanyAction',  
                    async: false,  
                    data: {  
                        'name': value, "monkeyid": GetQueryString("monkeyid"), "customerid": function () {  
                            return $("#hidCustomerID").val();  
                        }  
                    },  
                    success: function (data) {  
                        if (data.result == "TRUE") {  
                            flag = 0;  
                        }  
                        else if (data.result == "NO") {  
                            compaymsg = "Name does not exist";  
                        }  
                    }  
                });  
                if (flag == 0) {  
                    return true;  
                } else {  
                    return false;  
                }  
            }, compaymsg);  
  
  
            $("#form1").validate({  
                rules: {  
                    txtUserName:  
                    {  
                        required: true,  
                        minlength: 6,  
                        rangelength: [6, 20],           //长度5-10之间  
                        remote: {  
                            url: "/admin/CheckName",    //后台处理程序  
                            type: "post",               //数据发送方式  
                            dataType: "json",           //接受数据格式  
                            data: {                     //要传递的数据  
                                name: function () {  
                                    return $("#txtUserName").val();  
                                }  
                            }  
                        },  
                        ExistsCompany: true,  
                    },  
                    txtPassword: {  
                        required: true,  
                        minlength: 6,  
                        rangelength: [6, 20],    //长度5-10之间  
                        password: true,  
                    },  
                    txtPwd: {  
                        required: true,  
                        equalTo: "#txtPassword",  
                        minlength: 6,  
                        rangelength: [5, 20],    //长度5-10之间  
                        password: true,  
                    },  
                    txtDisplayName: {  
                        required: true,  
                        minlength: 6,  
                        rangelength: [6, 20],    //长度5-10之间  
                    },  
                    txtAge: {  
                        required: true,  
                        digits: true,  
                        min: 1,  
                        max: 100  
                    },  
                    sex: {  
                        required: true,  
                    },  
                    txtCard: {  
                        required: true,  
                        creditcard: true,  
                    },  
                    txtidcard: {  
                        required: true,  
                        idcard: true,  
                    },  
                    txtEmail: {  
                        required: true,  
                        email: true,  
                    },  
                    txtTel: {  
                        required: true,  
                        phone: true,  
                    },  
                    txtQQ: {  
                        required: true,  
                        qq: true,  
                    },  
                    txtUrl: {  
                        required: true,  
                        url: true,  
                    },  
                    txtZipCode: {  
                        required: true,  
                        zipcode: true  
                    },  
                    txtDate: {  
                        required: true,  
                        date: true,  
                    },  
                    txtISO: {  
                        required: true,  
                        dateISO: true,  
                    },  
                    filFile: {  
                        required: true,  
                        filetype: ["mp3", "wma", "wav"]  
                    }  
                },  
                messages: {  
                    txtUserName: {  
                        required: "请输入登录名",  
                        minlength: jQuery.format("登录名不能小于{0}个字符"),  
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
                        remote: "登录名已存在",  
                    },  
                    txtPassword: {  
                        required: "请输入密码",  
                        minlength: jQuery.format("密码不能小于{0}个字符"),  
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
                        password: "密码只能是数字、字母与下划线"  
                    },  
                    txtPwd: {  
                        required: "请输入确认密码",  
                        minlength: "确认密码不能小于5个字符",  
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
                        equalTo: "两次输入密码不一致不一致",  
                        password: "密码只能是数字、字母与下划线"  
                    },  
                    txtDisplayName: {  
                        required: "请输入用户名",  
                        minlength: jQuery.format("密码不能小于{0}个字符"),  
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",  
                    },  
                    txtAge: {  
                        required: "请输入年龄",  
                        digits: "只能输入数字",  
                        min: "最小值是1",  
                        max: "最大值是100"  
                    },  
                    sex: {  
                        required: "请选择性别",  
                    },  
                    txtCard: {  
                        required: "请输入信用卡",  
                        creditcard: "请输入信用卡",  
                    },  
                    txtidcard: {  
                        required: "请输入身份证号",  
                        idcard: "身份证号格式不正确",  
                    },  
                    txtEmail: {  
                        required: "请输入邮箱",  
                        email: "邮箱格式不正确",  
                    },  
                    txtTel: {  
                        required: "请输入手机",  
                        phone: "手机格式不正确"  
                    },  
                    txtQQ: {  
                        required: "请输入QQ",  
                        qq: "qq格式不正确",  
                    },  
                    txtUrl: {  
                        required: "请输入网址",  
                        url: "请输入正确的网址",  
                    },  
                    txtZipCode: {  
                        required: "请输入邮编",  
                        zipcode: "邮编格式不正确"  
                    },  
                    txtDate: {  
                        required: "请输入时间",  
                        date: "日期格式不正确",  
                    },  
                    txtISO: {  
                        required: "请输入ISO",  
                        dateISO: "ISO格式错误"  
                    },  
                    filFile: {  
                        required: "请选择文件",  
                        filetype: "只能上传MP3,WMA,WAV格式文件",  
                    }  
                },  
                submitHandler: function (form) {  
                    //避免重复提交数据  
                    $(form).find(":submit").attr("disabled", true);  
                    form.submit();  
                },  
                //指定错误信息位置  
                errorPlacement: function (error, element) {  
                    if (element.is(':radio') || element.is(':checkbox')) {  //如果是radio或checkbox  
                        var eid = element.attr('name');                     //获取元素的name属性  
                        error.appendTo(element.parent());                   //将错误信息添加当前元素的父结点后面  
                    } else {  
                        error.insertAfter(element);  
                    }  
                },  
            });  
        });  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <p>  
                <label>登录名：</label>  
                <input id="txtUserName" name="txtUserName" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>密码：</label>  
                <input id="txtPassword" name="txtPassword" class="sf" type="password" value="" />  
            </p>  
            <p>  
                <label>确认密码：</label>  
                <input id="txtPwd" name="txtPwd" type="password" value="" class="sf" />  
            </p>  
            <p>  
                <label>用户名：</label>  
                <input id="txtDisplayName" name="txtDisplayName" class="mf" type="text" value="" />  
            </p>  
            <p>  
                <label>年龄：</label>  
                <input id="txtAge" name="txtAge" class="mf" type="text" value="" />  
            </p>  
            <p>  
                <label>性别：</label>  
                <input id="Radio1" type="radio" value="" name="sex" />男<input id="Radio2" type="radio" value="" name="sex" />女  
            </p>  
            <p>  
                <label>信用卡：</label>  
                <input id="txtCard" name="txtCard" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>身份证：</label>  
                <input id="txtidcard" name="txtidcard" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>邮箱：</label>  
                <input id="txtEmail" name="txtEmail" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>手机：</label>  
                <input id="txtTel" name="txtTel" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>QQ：</label>  
                <input id="txtQQ" name="txtQQ" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>网址：</label>  
                <input id="txtUrl" name="txtUrl" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>邮编：</label>  
                <input id="txtZipCode" name="txtZipCode" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>时间：</label>  
                <input id="txtDate" name="txtDate" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>ISO：</label>  
                <input id="txtISO" name="txtISO" class="sf" type="text" value="" />  
            </p>  
            <p>  
                <label>文件：</label>  
                <input id="filFile" name="filFile" type="file" />  
            </p>  
        </div>  
        <input id="Submit1" type="submit" value="submit" />  
    </form>  
</body>  
</html>  



[javascript] view plain copy
password: function (value, element) {  
            return this.optional(element) || /^\w+$/.test(value);  
        },  
        address: function (value, element) {  
            return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9\s]+$/.test(value);  
        },  
        ///固定电话123-85611111 或 0311-8561111  
        phone: function (value, element) {  
            return this.optional(element) || /^\d{3}-\d{8}$|\d{4}-\d{7}$/.test(value);  
        },  
        ///13866666666  
        telphone: function (value, element) {  
            return this.optional(element) || /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/.test(value)  
        },  
        mobilephone: function (value, element) {  
            return this.optional(element) || /^\d{3}-\d{8}$|\d3\d{8}$|\d{4}-\d{7}$|\d4\d{7}$|1[358]\d{9}$/.test(value);  
        },  
        //身份证号  
        idcard: function (value, element) {  
            return this.optional(element) || /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);  
        },  
        ///上传文件格式验证  
        filetype: function (value, element, param) {  
            var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase();  
            return this.optional(element) || $.inArray(fileType, param) != -1;  
        },


BigFishisBig
关注
jQuery Validate格式验证功能实例代码（包括重名验证）
01-19
引入jQuery-1.7.1.js和jquery.validate.js两个js文件 jquery.validate.js下载地址：http://xiazai.jb51.net/201703/yuanma/jquery.validate.rar <!DOCTYPE html> <... <...script src=Scri
京东的js注册验证个人收集
weixin_33750452的博客
06-17 306
var validateRegExp={ decmal:"^([+-]?)\\d*\\.\\d+$", //浮点数 decmal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", //正浮点数 decmal2: "^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$", //负浮点数 decmal3: "^-?([1-9]\\d*.\...
jQuery Validate--针对多个相同名称的元素的验证
ONROAD0612的博客
09-08 2157
在项目开发中，通常会遇到一个表格构成的表单，那么表单里面就可能会有几个元素的名字相同，针对这种情况在validate默认的条件下是只能验证第一个，而后面的元素就不能得到验证，那么要解决这种问题就有以下两种处理方式。 注意：无论采用下面哪种处理方式，相同名称的元素都必须拥有id，否则是没有任何效果的。 方法一： 在需要验证的页面的js文件中添加以下代码即可：   /** * 针对具有相...
jQuery validate+Ajax校验名称是否重复
别告诉我有Bug
03-31 1034
jQuery validate+Ajax校验 校验名称是否重复的方法：     代码如下： jQuery.validator.addMethod("checkname", function (value, element) { var resultval = false; var name = $("input[name='Name']").val(); jQue...
vee-validate实现与后台对比是否重名验证
o0__0的博客
03-22 1717
let _this=this Validator.extend('hava', { messages: { zh_CN:field =&gt; '名字已存在', }, validate: value =&gt; { ...
JQuery.validate校验不能重复的问题
Hello World
07-05 3179
var validator; var isExistence; $(document).ready(function() { jQuery.validator.addMethod("isExistence", function(value, param) { $.ajax({ url : '${ctx}/***/isExistence', ...
jquery-validate:jquery-validate 插件
06-01
jquery-验证 jquery-validate 插件 安装 使用安装： $ component install virtru-components/jquery-validate 应用程序接口 执照 麻省理工学院
jquery-validate-1.4.0
02-25
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
jquery+validate.js+验证规则文件
09-03
只验证格式，不验证有效性。 7 number:true 必须输入合法的数字（负数，小数）。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 10 equalTo:"#field" 输入值必须和 #field 相同。 11 accept...
jquery validate 支持验证name重复的表单
01-09
在项目中经常遇到，表单可以动态追加多行。但是追加的行中，input 文本框的name会重复。如果用jquery validator ，它只支持验证第一个input,后面的name相同的input不会被验证，怎么办呐？经过研究源码，提出了解决办法。 基于jQuery Validation Plugin - v1.14.0 - 6/30/2015改造
Jquery validate验证表单时多个name相同的元素只验证第一个的问题
keke_Xin的专栏
10-12 494
下面搜集了五种方法，主要还是前两个提供了解决方案，第三种需要修改jQuery源码： 修复jquery.validate插件中name属性相同(如name=’a[]‘)时验证的bug 使用jquery.validate插件http://jqueryvalidation.org/，当节点的name相同时候，脚本特意忽略剩余节点，导致所有相关节点的errMsg都显示在第一个相关节点上。这个b...
validate 验证用户名是否重复和制定错误位置
zhangxiaomin1992的专栏
11-30 2213
validate 验证用户名是否重复和制定错误位置
jQuery Validate 检验重置
LitongZero的博客
02-22 4360
jQuery Validate 检验重置 使用场景 打开表单悬浮窗，进行错误输入(触发remote验证)，关闭表单，再次打开表单悬浮窗，直接提交，此时remote方法不会执行，导致验证失败。 解决方法 在关闭表单悬浮窗时，重置Validate验证 实例 //注意变量声明写在外面 var = myEditValidate; myEditValidate = $("#myForm form")....
JQuery validate 验证数据是否与数据库中数据重复
TOP_Y的专栏
12-04 4201
几天在添加一个验证用户名是否存在的功能时添加了一个自定义方法//向jQuery Validator中添加自己的规则 $.validator.addMethod("checkRepeat",function(value,element,params){ $ .ajax({ type : "post", dataType : "json", data :
jquery.validate.js校验框架中的验证用户名是否可用
lhzjj的专栏
06-11 8774
以下为部分代码   1.jsp代码要验证的用户名： /student_add.action"    method="post" id="studentForm">    学生信息添加               姓名:                      -------------------------------------------------------
Thinkphp使用Validate里的正则表达式验证中文名字和身份证号码
美奇软件开发工作室
11-20 2388
众所周知，javascript里验证中文的正则表达式如下： var name = $("input[name='name']").val(); var regex=/^[\u4E00-\u9FA5]{2,10}$/; if(regex.test(name)==false){ alert('请输入真实的中文姓名', '提示'); return false; } js使用的是[\u4E00-\u9FA5]，但是在php中使用则会出现如下报错信息： 那我们要怎么做呢，正确代码如下： .
html表单验证性别,html5 html5Validate实现表单验证
weixin_39769807的博客
06-05 293
$(function () {//修改提示信息显示样式$.testRemind.css = {padding: "8px 10px",borderColor: "#aaa",borderRadius: 8,boxShadow: "2px 2px 4px rgba(0,0,0,.2)",background: "#fff url(chrome-remind.png) no-repeat 10px 1...
Validform自定义规则同时校验长度和判重
kiven_csdn的博客
05-14 1023
Validform自定义规则 背景 本页面是一个部署服务页面 上一个页面是服务列表页面 我们希望能够在在部署服务的时候，检查一下服务名是否重复 于是就需要自定义规则 代码 html部分为： <form class="form-horizontal" id="saveForm" style="margin-top: 15px;" onsubmit="return false;"> ...
jQuery Validate 实例：格式与重名验证代码解析
本文主要介绍如何使用jQuery Validate插件实现表单的格式验证，并且包含重名验证的示例代码。 jQuery Validate是一个流行的JavaScript库，它使得在网页表单验证用户输入变得更加简单和灵活。这个插件提供了丰富的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值