jQuery验证插件实现表单验证

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插件验证验证方法总结

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