JQuery+formValidator实现表单验证
<!--
需求：
用户注册页面要有用户名、密码、确认密码、邮箱
用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合
密码框：密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
确认密码框：确认密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符，并且要和密码框中的内容保持一致
邮箱框：邮箱需要输入正确的邮箱格式并且不能为空
--> 效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JQUERY</title>
<script src="jquery-3.3.1.js"></script>
<script src="formValidator4.0.1/formValidator-4.0.1.js"></script>
<script src="formValidator4.0.1/formValidatorRegex.js"></script>
<link type="text/css" rel="stylesheet" href="formValidator4.0.1/style/validator.css">
//rel并不能省略，省略了就看不到小图片的显示了
</head>
<fieldset>
<legend>用户注册页面</legend>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="username"></td>
<td>
<div id="usernameTip"></div>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd"></td>
<td>
<div id="pwdTip"></div>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="repwd"></td>
<td>
<div id="repwdTip"></div>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="email" id="email"/></td>
<td>
<div id="emailTip"></div>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="submit"></td>
<td></td>
</tr>
</table>
</form>
</fieldset>
<body>
</body> </html>
<script type="text/javascript">
$.formValidator.initConfig({
validatorGroup: "1",
submitOnce: true,
onSuccess: function () {
alert("表单验证成功");
},
onError: function () {
alert("表单验证失败");
}
}); $("#username").formValidator({
validatorGroup: "1",
onShow: "请输入用户名",
onEmpty:"用户名不能为空",
onFocus: "请输入用户名，由6-12位数字或英文字母的组合",
onCorrect: "用户名输入正确",
}).inputValidator({
type: "size",
max: 12,
min: 6,
onError: "用户名长度错误"
}).regexValidator({
regExp: "^[a-zA-z0-9]{6,12}$",
dataType: "string",
onError: "用户名输入格式错误。"
}); //密码
$("#pwd").formValidator({
validatorGroup: "1",
onShow: "请输入密码",
onEmpty:"密码不能为空",
onFocus: "请输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
onCorrect: "密码输入正确"
}).inputValidator({
type: "size",
max: 12,
min: 6,
onError: "密码长度错误",
}).regexValidator({
//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
dataType: "string",
onError: "密码格式错误，请重新输入！"
}); //确认密码
$("#repwd").formValidator({
validatorGroup: "1",
onShow: "请再确认密码",
onEmpty:"确认密码不能为空",
onFocus: "请再次输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
onCorrect: "确认密码输入正确"
}).inputValidator({
type: "size",
max: 12,
min: 6,
onError: "确认密码长度错误",
}).regexValidator({
//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
dataType: "string",
onError: "确认密码格式错误，请重新输入！"
}).compareValidator({
desID: "pwd",//注意这里的pwd不能再加#号
operateOr: "=",
dataType: "string",
onError: "两次密码输入不一致，请重新输入。"
}); //邮箱
$("#email").formValidator({
validatorGroup: "1",
onShow: "请输入邮箱地址",
onEmpty:"邮箱不能为空",
onFocus: "请输入正确的邮箱格式",
onCorrect: "恭喜，邮箱输入正确",
}) .regexValidator({
regExp: "^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$",
dataType: "string",
onError: "邮箱格式输入错误"
});
/*
邮箱这块使用inputValidator就会出现始终为空的现象，不知道为什么，
.inputValidator({
type: "size",
max: 12,
min: 1,
onError: "邮箱不能为空",
})
*/
</script>
---恢复内容结束---
<!--
需求：
用户注册页面要有用户名、密码、确认密码、邮箱
用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合
密码框：密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
确认密码框：确认密码不能为空，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符，并且要和密码框中的内容保持一致
邮箱框：邮箱需要输入正确的邮箱格式并且不能为空
--> 效果图： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JQUERY</title>
<script src="jquery-3.3.1.js"></script>
<script src="formValidator4.0.1/formValidator-4.0.1.js"></script>
<script src="formValidator4.0.1/formValidatorRegex.js"></script>
<link type="text/css" rel="stylesheet" href="formValidator4.0.1/style/validator.css">
//rel并不能省略，省略了就看不到小图片的显示了
</head>
<fieldset>
<legend>用户注册页面</legend>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="username"></td>
<td>
<div id="usernameTip"></div>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd"></td>
<td>
<div id="pwdTip"></div>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="repwd"></td>
<td>
<div id="repwdTip"></div>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="email" id="email"/></td>
<td>
<div id="emailTip"></div>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="submit"></td>
<td></td>
</tr>
</table>
</form>
</fieldset>
<body>
</body> </html>
<script type="text/javascript">
$.formValidator.initConfig({
validatorGroup: "1",
submitOnce: true,
onSuccess: function () {
alert("表单验证成功");
},
onError: function () {
alert("表单验证失败");
}
}); $("#username").formValidator({
validatorGroup: "1",
onShow: "请输入用户名",
onEmpty:"用户名不能为空",
onFocus: "请输入用户名，由6-12位数字或英文字母的组合",
onCorrect: "用户名输入正确",
}).inputValidator({
type: "size",
max: 12,
min: 6,
onError: "用户名长度错误"
}).regexValidator({
regExp: "^[a-zA-z0-9]{6,12}$",
dataType: "string",
onError: "用户名输入格式错误。"
}); //密码
$("#pwd").formValidator({
validatorGroup: "1",
onShow: "请输入密码",
onEmpty:"密码不能为空",
onFocus: "请输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
onCorrect: "密码输入正确"
}).inputValidator({
type: "size",
max: 12,
min: 6,
onError: "密码长度错误",
}).regexValidator({
//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
dataType: "string",
onError: "密码格式错误，请重新输入！"
}); //确认密码
$("#repwd").formValidator({
validatorGroup: "1",
onShow: "请再确认密码",
onEmpty:"确认密码不能为空",
onFocus: "请再次输入密码，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符",
onCorrect: "确认密码输入正确"
}).inputValidator({
type: "size",
max: 12,
min: 6,
onError: "确认密码长度错误",
}).regexValidator({
//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
regExp: "^.*(?=.{6,12})(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$",
dataType: "string",
onError: "确认密码格式错误，请重新输入！"
}).compareValidator({
desID: "pwd",//注意这里的pwd不能再加#号
operateOr: "=",
dataType: "string",
onError: "两次密码输入不一致，请重新输入。"
}); //邮箱
$("#email").formValidator({
validatorGroup: "1",
onShow: "请输入邮箱地址",
onEmpty:"邮箱不能为空",
onFocus: "请输入正确的邮箱格式",
onCorrect: "恭喜，邮箱输入正确",
}) .regexValidator({
regExp: "^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$",
dataType: "string",
onError: "邮箱格式输入错误"
});
/*
邮箱这块使用inputValidator就会出现始终为空的现象，不知道为什么，
.inputValidator({
type: "size",
max: 12,
min: 1,
onError: "邮箱不能为空",
})
*/
</script>
JQuery+formValidator实现表单验证的更多相关文章
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- jQuery Validation Engine 表单验证，自定义规则验证方法
jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...
- 自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
随机推荐
- C# 中DataGridView和ListView闪烁问题的解决方法
C# 中DataGridView和ListView闪烁问题的解决方法 方法一首先定义类,将此类放在datagridview或ListView所在的窗体类外面,然后代码如下, <span styl ...
- declaration may not appear after executable statement in block
keil 编译时出现 declaration may not appear after executable statement in block,找到keil工程对应的函数 定义的地方出现在了赋值的 ...
- USB协议学习
URB:USB 请求块(USB request block,urb)是USB 设备驱动中用来描述与USB 设备通信所用的基本载体和核心数据结构,非常类似于网络设备驱动中的sk_buff 结构体.
- 使用java注解实现toJson方法
如果我有一个对象user,它有几个属性,我想把该对象序列化成一个json字符串,怎么做?我怎么把这种类型的问题实现成一个函数? 注解类似于在被注解的对象上,添加一些简单的属性.在运行时解析这些属性,以 ...
- java-消息中间件-基于内存的mq
如果用户的请求比较费时,可以考虑将用户的请求信息放到队列中,立即返回给用户处理中等信息,这样可以给用户比较流畅的体验,后端可以利用单独的服务消费消息,做到了解耦,提高了并发能力. 本文使用jdk为我们 ...
- DCDC电源 TPS54525
电路图: 输入电压12V,输出电压5V.不接负载可以获得5V输出,接入负载后只有4mV,且PG为低. 预计原因:可能是上电瞬间电流过大,芯片过流保护. 解决方案:SS软启动引脚的电容C331加大至1u ...
- JAVA相关技术
开发服务器环境: 1.Linux系统 CentOS 6.5\7 2.JDK1.8 3.tomcat 9 4.mysql 5.7 开发环境: 1.开发集成工具:idea 2.构建工具maven 仓库暂时 ...
- vs2015中SQLSERVER数据库项目引用系统视图
近期使用VS中的SQLSERVER数据库项目进行项目开发,由于有很多自动化脚本会访问系统视图,例如sysobjects之类的,在项目中的脚本总是提示无法解析的引用,解决办法如下: 添加数据库引用 添加 ...
- yml文件搞一波
引用https://www.cnblogs.com/zslli/p/8717483.html https://www.cnblogs.com/baoyi/p/SpringBoot_YML.html 划 ...
- 网络通信协议tcp,udp区别
1 网络通信协议 Tcp udp的区别 重点(*****) Tcp三次握手四次挥手(******) udp客户端多人聊天 import socket udp_client = socket.socke ...