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插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
随机推荐
- django中form页面刷新后自动提交的解决方案
如果一个页面包含了form,同时这个form中的提交按钮是type=submit的input的时候,你刷新该页面,就会有弹窗提示是否重新提交表单,这个特性不胜其烦,常见解决方法有两个: 第一种是前端的 ...
- WinDbg安装
WinDbg是微软发布的一款相当优秀的源码级(source-level)调试工具,可以用于Kernel模式调试和用户模式调试,还可以调试Dump文件. 主页:http://msdn.microsoft ...
- linux修改root密码
或者是:sudo passwd root 提示输入新的密码.再确认输入一次密码回车,就可以完成root密码的修改. 更改成功,以后就用这个新的密码登陆到Linux系统中去
- excel表格公式无效、不生效的解决方案及常见问题、常用函数
1.表格公式无效.不生效 使用公式时碰到了一个问题,那就是公式明明已经编辑好了,但是在单元格里不生效,直接把公式显示出来了,网上资料说有4种原因,但是我4种都不是,是第5种原因,如下图: 这种情况是由 ...
- python基础知识10---算法
一.递归 程序本身自己调用自己称之为递归,类似于俄罗斯套娃,体现在代码中:用户执行最外(N)层函数,最外侧调用N-1层函数,N-1层函数调用N-2层函数... 利用函数编写如下数列: 斐波那契数列指的 ...
- 从Wos文本数据中获取摘要进行分析的一种方法
namespace 清理数据 { class Program { static void Main(string[] args) { string strDirName = "File&qu ...
- docker整理
Docker的简单介绍 docker是什么 Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache ...
- Access denied when I try to install profiler
I had the same issue and used the diagtool to find more information. The traces showed this error me ...
- strct配置文件详解
1,strct配置文件详解 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configurati ...
- Java异常处理——受控（checked）的异常（throws语句）
受控与不受控的异常 1.throws语句中声明的异常称为受控(checked)的异常,通常直接派生自Exception类. 2.RuntimeException(其基类为Exception) 和Err ...