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插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
随机推荐
- 前端表单提交数据~php获取表单内容
上图代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- stm32之中断配置
一.stm32的中断和异常 Cortex拥有强大的异常响应系统,它能够打断当前代码执行流程事件分为异常和中断,它们用一个表管理起来,编号为0~15为内核异常,16以上的为外部中断,这个表就是中断向量表 ...
- IDEA编译时出现 Information:java: javacTask: 源发行版 1.8 需要目标发行版 1.8
错误如下 检查下面几个地方设置是否一致... 1.Project Structure下(File->Project Structure...) Sources选项卡->Languate l ...
- VSFTP的使用
一.基本安装 1.安装服务 yum -y install vsftpd //centos Redhat apt-get install vsftpd //debian ubuntu 2.开启服务 se ...
- GridView更新后获取不到文本框修改后的值
需要在Page_Load事件里为gridview绑定数据时,添加回传判断 if (!IsPostBack) { 绑定数据 }
- numpy和matploptlib
numpy Numpy介绍 编辑 一个用python实现的科学计算,包括:1.一个强大的N维数组对象Array:2.比较成熟的(广播)函数库:3.用于整合C/C++和Fortran代码的工具包:4.实 ...
- HTML如何实现斜体字
HTML实现斜体字的标签为<i>标签,用来实现字体倾斜,写法如下: 字体斜体:<i>内容</i> 案例:正常 斜体 当文字加入i标签以后字体就会成为斜体
- 【原创】Windows上应用程序报错常用分析方法总结
在日常使用Windows的过程中,经常会遇到应用程序不能正常启动.关闭等使用问题.对于Windows来说,解决这些问题的方法比较多,大多时候我们可以通过百度或谷歌搜索来解决.但更多的时候,我们需要找出 ...
- 最近想学Json，请问大家有没有什么好的Json教程介绍一下？
最近想学json,请问大家有没有什么好的Json教程介绍一下? 最近学完java的框架了,想了解一下json,可是找不到相关视频,请大家有这方面的Json教程好资料就介绍下啦,最后有网址链接啦. {} ...
- 推介一个学习JAVA的系列教程-狗鱼IT教程
介绍一个学JAVA的零基础学习JAVA的网站,推介一个学习JAVA的系列教程-狗鱼IT教程 下面是java的系教程: 1､[java教程]Java 教程 2､[java教程]Java 简介 3､[ja ...