jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox
使用时需要向页面引入两个css文件如下:
<link rel="stylesheet" href="css/icon.css">
<link rel="stylesheet" href="css/easyui.css">
还需要引入三个外部js库
<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
//这是中文简体语言包
<script src="js/easyui-lang-zh_CN.js" type="text/javascript"></script>
validatebox表单验证实例
$(function () {
$("#name").validatebox({
required:true,
validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
missingMessage:"请输入用户名"
})
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules,{
//验证用户名的格式
checkUser:{
validator:function (value, param) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
},
message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"
},
})
//easyui表单提交的控制
$('#loginForm').form({
onSubmit:function(){
return $(this).form('validate');
},
success:function(){
$.messager.alert('Info', "恭喜您,注册成功!");
}
});
})
validate表单验证
需要引入两个外部js库
<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js"></script>
validate表单验证实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>验证框架的使用</title> <style type="text/css">
.error{
color: red;
}
</style>
</head>
<body>
<form action="success.html" method="post" id="myForm">
用户名：<input name="userName"> <br/>
密码：<input name="password" type="password" id="pwd"> <br/>
确认密码：<input name="repPassword"type="password" > <br/>
邮箱：<input name="email"> <br/>
手机号：<input name="phone"> <br/>
性别：<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女">女<br/>
是否同意协议<input type="checkbox" name="context"><br/>
<button type="submit">注册</button>
</form> <!--引入需要的js库-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//form表单的验证事件
$("#myForm").validate({
//验证规则 需要对哪些元素做验证
rules:{
userName:{
required:true
},
password:{
required:true,
minlength:6,
maxlength:10
},
repPassword:{
required:true,
minlength:6,
maxlength:10,
equalTo:"#pwd"
},
email:{
required:true,
email:true
},
phone:{
required:true,
checkPhone:true //自己书写的手机验证正则
},
context:{
required:true
}
}, //rules end
//不符合验证规则的错误信息
messages:{
userName:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
minlength:"密码长度不能少于6位",
maxlength:"密码长度不能大于10位"
},
repPassword:{
required:"请输入密码",
minlength:"密码长度不能少于6位",
maxlength:"密码长度不能大于10位",
equalTo:"两次密码输入不一致"
},
email:{
required:"请输入邮箱",
email:"邮箱格式不正确"
},
phone:{
required:"请输入手机号",
checkPhone:"电话号码格式不正确"//自己书写的手机验证正则
},
context:{
required:"您没有同意协议"
}
}, // messages end
//鼠标失去焦点立即验证
onfocusout:function(element){
$(element).valid();
}
}); // end validate
//增加了手机验证正则
jQuery.validator.addMethod("checkPhone",function(value,element){
var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (tel.test(value));
},"电话号码格式不正确")
})
</script> </body>
</html>
$(function () {
$("#name").validatebox({
required:true,
validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
missingMessage:"请输入用户名"
})
$("#phone").validatebox({
required:true,
validType:['userTel'],
missingMessage:"请输入电话号码"
})
$("#userPwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]'],
missingMessage:"请输入密码"
})
$("#userePwd").validatebox({
required:true,
validType:['minlength[6]','maxlength[16]','checkPass','equalTo["#userPwd"]'],
missingMessage:"请再次输入密码"
})
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules,{
//验证用户名的格式
checkUser:{
validator:function (value, param) {
return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
},
message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"
},
//验证用户名的长度
minlengthUser:{
validator:function(value,param){
return value.length>=param[];
},
message:"用户名长度至少为{0}位"
},
maxlengthUser:{
validator:function(value,param){
return value.length<param[];
},
message:"用户名长度必须小于{0}位"
},
//验证密码最小长度
minlength:{
validator:function(value,param){
return value.length>=param[];
},
message:"密码长度至少为{0}位"
},
//验证密码最大长度
maxlength:{
validator:function(value,param){
return value.length<param[];
},
message:"密码长度必须小于{0}位"
},
//验证两次密码是否一致
equalTo: {
validator: function (value, param){
return $(param[]).val() == value;
},
message: "两次输入密码不匹配"
},
//验证手机号
userTel: {
validator: function (value, param) {
return /^1[3|4|5|8|9][0-9]{9}$/.test(value);
},
message: "手机号码格式不正确"
}
})
//easyui表单提交的控制
$('#loginForm').form({
onSubmit:function(){
return $(this).form('validate');
},
success:function(){
$.messager.alert('Info', "恭喜您,注册成功!");
}
});
jQuery-easyui和validate表单验证实例的更多相关文章
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- 第二百二十一节，jQuery EasyUI，Form(表单)组件
jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
- jquery-4 完整表单验证实例
jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...
- validate表单验证-单独验证
今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...
- Bootstrap+PHP表单验证实例
简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...
随机推荐
- map()实现zip()功能
c = (map(lambda x,y:(x,y),[1,2,3],["abd","def","ghi"]))print(list(c)) ...
- 【Linux】Centos7 解压zip文件
如果输入unzip无反应那么请安装相应软件包 yum install -y unzip 语法 unzip [参数] [文件] 参数 -c:将解压缩的结果显示到屏幕上,并对字符做适当的转换: -f:更新 ...
- ueditor 使用
之前在微信上用到富文本编辑器,选用了ueditor 之后又在项目中使用到了,因此打算写下来记录一下. 1 首先去下载ueditor 2 我的是 MVC项目,贴一下:粘贴到Content下 3 然后 ...
- Dapper 连表查询
实体类: UserInfo: public partial class UserInfo { public UserInfo() { this.Persion = new HashSet<Per ...
- codeforces 793B. Igor and his way to work
B. Igor and his way to work time limit per test 3 seconds memory limit per test 256 megabytes input ...
- MT【225】两平行直线夹曲线
已知函数$f(x)=x^3-3ax,(x\in(0,1))$若关于$x$的不等式$|f(x)|\le \dfrac{1}{4}$恒成立,求实数$a=$____ 方法一:代数法,转化成恒成立问题,略.方 ...
- MT【63】证明不是周期函数
证明$f(x)=sinx^2$不是周期函数. 反证:假设是周期函数,周期为$T,T>0$. $$f(0)=f(T)\Rightarrow sinT^2=0\Rightarrow T^2=k_1\ ...
- 在 Ali Kubernetes 系统中，我们这样实践混沌工程
在传统的软件测试中,我们通常通过一个给定的条件来判断系统的反馈,通过断言来判断是否符合预期,测试条件和结果通常比较明确和固定.而混沌工程,是通过注入一些“不确定”因素,象放进了一群淘气的猴子,在系统资 ...
- 自学Linux Shell14.3-创建临时文件
点击返回 自学Linux命令行与Shell脚本之路 14.3-创建临时文件mktemp Linux系统保留了一个特殊的目录位置,以供临时文件使用.Linux使用/tmp目录处理不需要永久保存的文件. ...
- 学习Spring Boot：（二十）使用 MongoDB
前言 MongoDB 1 是可以应用于各种规模的企业.各个行业以及各类应用程序的开源数据库.基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.Mongo ...