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 ...
随机推荐
- 远程连接db2数据库
在db2数据库中,需要理解catalog(编目)这个概念,理解前先说下db2数据库的体系结构:由系统(节点)也就是主机,下面是实例,实例下面是数据库,然后是表空间,再是数据库对象.现在假设你有一个数据 ...
- python有序字典
最近的django开发中用到了有序字典,所以研究了一下,以下. 示例: 有序字典和通常字典类似,只是它可以记录元素插入其中的顺序,而一般字典是会以任意的顺序迭代的. 普通字典: d1={} d1['a ...
- pandas 级联 concat append
连接的一个有用的快捷方式是在Series和DataFrame实例的append方法.这些方法实际上早于concat()方法. 它们沿axis=0连接 #encoding:utf8 import pan ...
- linux 下端口close_wait 过多问题
情景描述:系统产生大量“Too many open files” 原因分析:在服务器与客户端通信过程中,因服务器发生了socket未关导致的closed_wait发生,致使监听port打开的句柄数到了 ...
- Highcharts之饼图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Java和Spring邮件的发送
方法一: java发送电子邮件:这里以发送qq邮件为例: package test; import java.util.Properties; import javax.mail.Authentica ...
- BZOJ5178[Jsoi2011]棒棒糖——主席树
题目描述 Coffee的世界里也是有棒棒糖卖的,Coffee买了N(1≤N≤50000)只连着的.这N只棒棒糖包裹在小塑料袋中,排成 一列,相邻的两只棒棒糖的塑料袋是接起来的.为了方便,我们把棒棒糖从 ...
- BZOJ3129 SDOI2013方程（容斥原理+扩展lucas）
没有限制的话算一个组合数就好了.对于不小于某个数的限制可以直接减掉,而不大于某个数的限制很容易想到容斥,枚举哪些超过限制即可. 一般情况下n.m.p都是1e9级别的组合数没办法算.不过可以发现模数已经 ...
- CF1114B Yet Another Array Partitioning Task（贪心，构造题）
我至今不敢相信我被这么一道简单的题卡了这么久……看来还是太弱了…… 题目链接:CF原网 题目大意:定义一个序列的“美丽度”为这个序列前 $m$ 大的数的和.现在有一个长度为 $n$ 的序列,你需要把它 ...
- Elasticsearch 基础知识要点与性能监控
本文的来源是我翻译国外的一篇技术博客,感谢原作者Emily Chang,原文地址通过如下的知识,我们能大致学到关于ES的一些基本知识,进而对elasticsearch的性能进行监控和调优 注意elas ...