jQuery验证插件 Validate校验及自定义验证规则

news/2024/7/19 14:09:29 标签: js, javascript

1. validate的使用步骤

1.引入jquery.min.js
2.引入 jquery.validate.js
下载地址:https://www.jq22.com/jquery-info122
3.页面加载后对表单进行验证 $("#表单id名").validate({})
4.在validate中的rules中编写验证规则(格式如下)

  1. 字段的name属性:“校验器”(tisps:一个输入框只有一个校验器的时候使用)

  2. 字段的name属性:{校验器:值,校验器:值}(tips:输入框需要有多个校验器的时候使用)

5.在validate中的messages中编写提示信息(tips格式与rules相对应)
6.在validate中的submitHandler中编写验证通过执行的内容

2.默认校验

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

3.自定义验证规则

addMethod(name,method,message)方法
参数 name 是添加的方法的名字。

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

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

使用规则

 $("form").validate({
            rules: {
                StuLoginPwd(文本框name名): {
                    alnum(方法的name): true
                }
        });

字母数字

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

身份证号码验证

jQuery.validator.addMethod(“idcardno”, function(value, element) {
            return this.optional(element) || isIdCardNo(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));
        }, “请输入汉字”);

字符验证

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(“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("");
}, "结束时间不能小于开始时间");

http://www.niftyadmin.cn/n/957054.html

相关文章

SQL Server (DML、DDL、登录)触发器

概念 触发器&#xff08;trigger&#xff09;是SQL server 提供给程序员和数据分析员来保证数据完整性的一种方法&#xff0c;它是与表事件相关的特殊的存储过程&#xff0c;它的执行不是由程序调用&#xff0c;也不是手工启动&#xff0c;而是由事件来触发&#xff0c;比如当…

如何让自己的文章被百度等搜索引擎爬到

CSDN 写完博客将链接提交给百度站长&#xff1a; https://ziyuan.baidu.com/linksubmit/url 这样有助于百度爬虫爬取文章 要想快速被搜索引擎抓你就得稍稍了解一下搜索引擎的原理&#xff0c;搜索引擎它是顺着一个站&#xff0c;将网站中的url全部提取出来&#xff0c;然后再…

储存过程实现登录和注册

首先我建好了一张用户表表中有俩个字段 一个是账号&#xff0c;一个是密码当然这里我写的知识简单的登录和注册&#xff0c; 表明 users 用户表字段 accountnum varchar(50) --表示账号password varchar(50) --表示密码登录存储过程create proc use_login(accountnum var…

sql server数据库五大约束

五大约束 1.—-主键约束&#xff08;Primay Key Coustraint&#xff09; 唯一性&#xff0c;非空性 2.—-唯一约束 &#xff08;Unique Counstraint&#xff09;唯一性&#xff0c;可以空&#xff0c;但只能有一个 3.—-检查约束 (Check Counstraint) 对该列数据的范围、格式…

无法访问此网站 localhost 拒绝了我们的连接请求

解决方法 进入 SQL Server 管理环境中 展开 数据库 – BOOK 1 右击 BOOK – 属性 &#xff0c;弹出BOOK的数据库属性画面 2 在选项页下面&#xff0c;点选 权限 3 在用户或角色列表中&#xff0c;点选 NT AUTHORITY/NETWORK SERVICE 4 在下面 NT AUTHORITY/NETWORK SERVICE …

Win10 IIS Web服务器安装与配置

配置云控制台 首先登陆自己的云服务器&#xff0c;我用的是阿里云&#xff08;华为云&#xff0c;腾讯云有一点点差异&#xff0c;但本质都是一样的&#xff09;&#xff0c;找到你的云服务的实例&#xff0c;点击进入“本实例安全组” 进入后单击配置规则&#xff0c;然后选…

正确的写法:组合框

<!DOCTYPE html> <html><div id"app"> <my-inputlabel"请选择了解信息的渠道":list"[报纸, 网络, 朋友介绍]"v-model"selectedVal"></my-input> <span>选中的值是&#xff1a; {{ selectedVal }}…

Vue修改页面标题

1、在路由加上tile名称 2、在main.js加上这些即可 router.beforeEach((to, from, next) > {if (to.meta.title) {document.title to.meta.title}next() })