宝哥软件园

jQuery验证插件实现表单验证

编辑:宝哥软件园 来源:互联网 时间:2021-09-07

jQuery验证插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括统一资源定位器和电子邮件验证,同时提供了一个用来编写用户自定义方法的原料药。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他37 种语言。更重要的是他是由jQuery团队、jQuery用户界面团队的主要开发人员约恩扎弗勒编写和维护的。具体我们可以访问jQuery验证官网,下载最新版的jQuery验证插件。需要引入以下射流研究…文件

脚本类型=' text/JAVAScript ' src=' http : jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : jquery。验证。量滴js /脚本类型=' text/JAVAScript ' src=' http : validate-methods。js /脚本类型=' text/JAVAScript ' src=' http 3360 messages _ zh。量滴js /为扩展的验证规则messages_zh.js为验证提示文件

!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题表单验证/title脚本类型=' text/JAVAScript ' src=' http : jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : jquery。验证。量滴js /脚本类型=' text/JAVAScript ' src=' http : validate-methods。js /脚本类型=' text/JAVAScript ' src=' http : messages _ zh。量滴js '帐号:/label div输入名称='用户名'类型='text '占位符='请填写由数字、26个英文字母或者下划线组成的帐号!/div /div标签手机号码:/label div输入名称='tel '类型='text '占位符='请输入手机号码/div /div标签邮箱:/label div输入名称='电子邮件'类型='电子邮件'占位符='请输入邮箱/div /div标签必填字段:/label div输入名称='bt '类型=“文本”占位符='这是必填字段/div /div标签输入密码:/label div输入名称='密码'类型='密码'占位符='请输入密码/div /div标签请再次输入密码:/label div输入名称='密码'类型='密码'占位符='请再次输入密码/div /div按钮类型='提交'提交/button/div/div/form/body脚本类型=' text/JavaScript ' $(' # demo ').验证({规则s : {用户名: {必需d : true,/*默认效验规则*/账号: rue,/*最短6位数,最长16位数*/minlength:6,maxlength:16 },tel: { required:true,/*默认效验规则*/number:true },电子邮件: {必填项d : true,/*默认效验规则*/email:true },bt:{ /*默认必填*/required:true,},password : { required : true,minlength:6,maxlength:16,/*密码验证*/equalTo:'#password' },},/*错误提示*/messages : { username : {/*错误显示的提示语*/required: '请填写由数字、26个英文字母或者下划线组成的帐号!minlength: '帐号最小为6位,maxlength: '帐号最大为16位,},tel:{ required: '请填写手机号码,},email:{ required: '请填写邮箱,},password: { required: '请填写密码,minlength: '密码最小为6位,maxlength: '密码最大为16位', }, }, });/*创建自定义正则表达式语法*/$ .验证器。addmethod(' account ',function(value,element,params){ var account=/^w{3,20}$/;退货(账户。测试(值));},'请填写由数字、26个英文字母或者下划线组成的帐号!');$.validator.addMethod('number ',function(value,element,params){ var number=/^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1})) d { 8 })$/;返回(数字。测试(值));},'请填写正确的手机号码!');/script/html浏览器结果:

代码演示操作结果

这里写图片描述

默认校验规则

常用的正则表达式

一、校验数字的表达式

1位数字:[0-9] * $2 n位数字: d {n} $3至少n位数字: d {n,} $4 m-n位数字: d {m,n} $5和非零起始数字:(0 | [1-9 $7带1-2位小数的正数或负数:-)?d (。d{1,2})?$8正数、负数和小数:(-| )?d (。d)?$9是一个正实数,有两个小数位:[0-9](。[0-9] {2})?$10是一个正实数,有1~3个小数位:[0-9](。[0-9] {1,3})?$11是非零正整数:[1-9] d * $ or ([1-9] [0-9] *) {1,3} $ or ?[1-9][0-9]*$12是非零负整数:-[1-9] [] 0-9' * $或-[1-9] d * $13是非负整数:-d $或[1-9] d $或[1-9] d * 。 d * | 0 。 d * [1-9] d * | 0 .0 |0$16是非正浮点数:(- d ()。 d)?)|(0 (.0 )?)$或(-([1-9] d * 。 d * | 0 。 d *[1-9] d *)| 0?.0 |0$17是正浮点数:[1-9] d * 。 d * | 0 。 d * [1-9] d * $或(([0-9] 。D*|0。d*[1-9]d*)$或(-(([0-9] 。[0-9]*[1-9]*)|([0-9]*[1-9] d)(。d)?$或-?([1-9]d*。d*|0。d*[1-9]d*|0?.0 |0)$

第二,检查人物的表情

1个中文字符:[ u4e00- u9fa5] {0,} $2个英文和数字:[a-za-z0-9] $或[a-za-z0-9] {4,40} $3个长度为3-20的所有字符:{ 20}$4由26个英文字母组成的字符串:[a-za-z] $5由26个大写英文字母组成的字符串:[a-z] $6由26个小写英文字母组成的字符串:[a-z] $7由数字和26个英文字母组成的字符串:[a-za-z0-。W $或 w {3,20} $9中文、英文和数字包括下划线:[ U4E00- U9Fa5A-ZA-Z0-9 _] $10中文、英文和数字但不包括下划线和其他符号:[ U4E00- U9Fa5A-。=?字符,如$ ': [% ',=?$x22] 12禁止输入包含~: [~ x22]的字符

三.特殊需求的表达

1电子邮件地址: w([-]。] w)* @ w([-]。] w) * 。 w ([-。] w) * $2域名:[a-za-z0-9][-a-za-z . 3 internet URL:[a-za-z]:/[ s]*或http://([ w-] 。)[ w-] (/[ w-。/?%=]*)?$4手机号码:(13[0-9]| 14[5 | 7]| 15[0 | 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9]| 18[0 | 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9] d { 7,8}$ 6国内电话号码(0511-4405222,021-8788822): d { 3 }- d { 8 } | d { 4 }- d { 7 } d { 5 }[1-9] d { 3 }((0 d)|(1[0-2])([0 |)$或 d {8,18} | [0-9x] {8,18} | [0-9x] {8,18}? $9帐户是否合法(以字母开头,允许5-16个字节和字母数字下划线):[A-ZA-Z] [A-ZA-Z0-9 _] {4,15} $10密码(以字母开头,长度在6到18之间,只能包含字母、数字和下划线):[=。*d)(?=.*[a-z])(?=.*[A-Z])。{8,10}$ 12日期格式: d {4}- d {1,2}- d {1,2} 13一年中的12个月(01 ~ 09和1 ~ 12): (0?[1-9]|1[0-2])$14一个月31天(01-09和1-31): ((0?[1-9]) | ((1 | 2) [0-9]) | 30 | 31)输入格式为$15: 16 1。我们可以接受:‘10000.00’和‘10000.00’四种货币形式,没有‘美分’000的货币形式:【1-9】【0-9】* $ 172。这意味着任何不以0开头的数字,但也意味着字符“0”不会通过,因此我们采用以下形式:(0 | [1-9] [0-9] *) $18 3。一个[1-9][0-9]*)$ 19 4。这意味着一个零或者可能是一个不以零开始的负数。让用户从零开始。去掉负号,因为钱不可能总是负数。下面我们要补充的是解释可能的小数部分:[0-9](。[0-9])?$20 5.必须说明小数点后至少要有一位数字,所以是' 10。未通过,但通过了“10”和“10.2”:[0-9](。[0-9] {2})?$21 6.所以我们规定小数点后必须有两位数。如果觉得太苛刻,可以这样走:[0-9](。[0-9] {1,2})?$22 7.这允许用户只写一个小数位。接下来,我们应该考虑数字中的逗号。我们可以这样做:[0-9] {1,3}(,[0-9] {3}) *(。[0-9] {1,2})?$23 8.1到3个数字,后跟任意逗号,逗号是可选的,但不是必需的:([0-9] | [0-9] {1,3}(,[0-9] {3}) *)(。[0-9] {1,2})?注:这是最终结果。不要忘记,如果你认为空字符串是可以接受的(奇怪,为什么?最后,在使用函数时不要忘记删除反斜杠。一般的错误都在这里。25 xml文件:([a-za-z]-?)[a-za-z0-9] 。[x | x] [m | m] [l | l] $26汉字正则表达式:[u4e00-u9fa5]27双字节字符:[ x00- xff](包括)[^]*.汉字*?/1|.*?/(网上流传的版本太烂了,上面那个只能部分使用,但是对于复杂的嵌套标签还是无能为力。)30前导和尾随空白字符的正则表达式: s * | s * $或( s *) | ( s * $)(可用于删除行首和行尾的空白字符(包括空格、制表符、分页符等)。) !d)(中国邮政编码为6位数字)33 IP地址: d 。 d 。 d(提取IP地址时有用)

精彩话题分享:jQuery插件验证验证方法总结

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

更多资讯
游戏推荐
更多+