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 ...
随机推荐
- Qt__自定义事件
#include <QApplication> #include <QEvent> #include <QObject> #include <QDebug&g ...
- matplotlib绘图2
fig=plt.figure() fig.add_subplot(3,3,1)#3行3列 第一个图 n=128 X=np.random.normal(0,1,n) Y=np.random.normal ...
- Maven环境配置及简单使用（二）
Maven环境变量配置 配置Maven前先从官网下载相关版本,Maven下载地址:http://maven.apache.org/download.cgi,笔者使用最新版本apache-maven-3 ...
- Sigma Function LightOJ - 1336 （约数和为奇数）
题意: 求1-n中约数和为偶数的数的个数 记住一个定理:...平方数 及其 平方数的2倍 的约数和为奇数 then....减啦 证明: ....我jiao着人家写的很详细,so 看看人家写的吧! 转 ...
- 配置远程jupyter notebook
在远程服务器上启动jupyter notebook,然后在本地进行访问.本文使用最简单的一种方法,无需设置密码,所以这种方法也是最不安全的方法,慎用. 1. 在远程服务器上生成jupyter note ...
- bzoj1691/luogu2869 [USACO07DEC]挑剔的美食家 (STL::set)
给牛和草都按价格排序,然后贪心地把草给牛(就是尽量给满足价格的.要求的美味度最高但不超过这个草的美味度的牛) 这个可以用一个平衡树来维护,偷懒直接用multiset了 #include<bits ...
- CF1114B Yet Another Array Partitioning Task（贪心，构造题）
我至今不敢相信我被这么一道简单的题卡了这么久……看来还是太弱了…… 题目链接:CF原网 题目大意:定义一个序列的“美丽度”为这个序列前 $m$ 大的数的和.现在有一个长度为 $n$ 的序列,你需要把它 ...
- CDQZ.OPENJUDGE DataStructure22
我觉得这是很重要的一些题目.它们都在这里:硕巨结构 Challenge 0:给定数列,单点修改,单点查询修改.煞有介事,不过一数组耳. Challenge 1:给定数列,单点修改,单点查询第k次操作后 ...
- SQL Server 查
注:where语句是条件,后面加and或者or 时间日期:比时间需要时间加引号 模糊查询:where语句后面加like '%包含此关键字%'或者'以此关键字开头%'或者'%结尾' 排序查询:列名 o ...
- ORACLE常用性能监控SQL
Temp表空间上进程的查询 select a.tablespace, b.sid, b.serial#, a.blocks,c.sql_text from v$sort_usage a,v$sessi ...