jQuery-easyui和validate表单验证实例-阿里云开发者社区

开发者社区> 必须往前走> 正文

jQuery-easyui和validate表单验证实例

简介: jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: 还需要引入三个外部js库 //这是中文简体语言包 validatebox表单验证实例 1 $(function () { 2 $("#name").
+关注继续查看

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表单验证实例

 1 $(function () {
 2     $("#name").validatebox({
 3         required:true,
 4         validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
 5         missingMessage:"请输入用户名"
 6 
 7     })
 8   
 9     //自定义验证规则
10 $.extend($.fn.validatebox.defaults.rules,{
11 
12     //验证用户名的格式
13     checkUser:{
14         validator:function (value, param) {
15             return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
16         },
17         message:"6~18个字符,可使用字母、数字、下划线,需以字母开头"
18     },
19 
20 })
21     //easyui表单提交的控制
22     $('#loginForm').form({
23 
24         onSubmit:function(){
25             return $(this).form('validate');
26         },
27         success:function(){
28             $.messager.alert('Info', "恭喜您,注册成功!");
29         }
30     });
31 })
View Code

 

validate表单验证

需要引入两个外部js库

 

<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js"></script>

validate表单验证实例

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>验证框架的使用</title>
  6 
  7     <style type="text/css">
  8         .error{
  9             color: red;
 10         }
 11     </style>
 12 </head>
 13 <body>
 14 <form action="success.html" method="post" id="myForm">
 15     用户名:<input name="userName">  <br/>
 16     密码:<input name="password" type="password" id="pwd">  <br/>
 17     确认密码:<input name="repPassword"type="password" >  <br/>
 18     邮箱:<input name="email">  <br/>
 19     手机号:<input name="phone">  <br/>
 20     性别:<input name="sex"  type="radio" value="男" checked> 21         <input name="sex"  type="radio" value="女">女<br/>
 22     是否同意协议<input type="checkbox" name="context"><br/>
 23    <button type="submit">注册</button>
 24 </form>
 25 
 26 
 27 <!--引入需要的js库-->
 28 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 29 <script type="text/javascript" src="../js/jquery.validate.js"></script>
 30 <script type="text/javascript">
 31     $(function(){
 32         //form表单的验证事件
 33         $("#myForm").validate({
 34             //验证规则  需要对哪些元素做验证
 35             rules:{
 36                 userName:{
 37                     required:true
 38                 },
 39             password:{
 40                 required:true,
 41                 minlength:6,
 42                 maxlength:10
 43             },
 44            repPassword:{
 45                required:true,
 46                minlength:6,
 47                maxlength:10,
 48                equalTo:"#pwd"
 49            },
 50           email:{
 51                     required:true,
 52                     email:true
 53            },
 54                 phone:{
 55                     required:true,
 56                     checkPhone:true  //自己书写的手机验证正则
 57                 },
 58                 context:{
 59                     required:true
 60                 }
 61             },  //rules  end
 62             //不符合验证规则的错误信息
 63             messages:{
 64                 userName:{
 65                     required:"请输入用户名"
 66                 },
 67                 password:{
 68                     required:"请输入密码",
 69                     minlength:"密码长度不能少于6位",
 70                     maxlength:"密码长度不能大于10位"
 71                 },
 72                 repPassword:{
 73                     required:"请输入密码",
 74                     minlength:"密码长度不能少于6位",
 75                     maxlength:"密码长度不能大于10位",
 76                     equalTo:"两次密码输入不一致"
 77                 },
 78                 email:{
 79                     required:"请输入邮箱",
 80                     email:"邮箱格式不正确"
 81                 },
 82                 phone:{
 83                     required:"请输入手机号",
 84                     checkPhone:"电话号码格式不正确"//自己书写的手机验证正则
 85                 },
 86                 context:{
 87                     required:"您没有同意协议"
 88                 }
 89             },  // messages  end
 90             //鼠标失去焦点立即验证
 91             onfocusout:function(element){
 92                 $(element).valid();
 93             }
 94     });  //  end   validate
 95         //增加了手机验证正则
 96         jQuery.validator.addMethod("checkPhone",function(value,element){
 97             var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
 98             return this.optional(element) || (tel.test(value));
 99         },"电话号码格式不正确")
100     })
101 </script>
102 
103 
104 
105 
106 </body>
107 </html>
View Code

 

 
$(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[0];
},
message:"用户名长度至少为{0}"
},
maxlengthUser:{
validator:function(value,param){
return value.length<param[0];
},
message:"用户名长度必须小于{0}"
},
//验证密码最小长度
minlength:{
validator:function(value,param){
return value.length>=param[0];
},
message:"密码长度至少为{0}"
},
//验证密码最大长度
maxlength:{
validator:function(value,param){
return value.length<param[0];
},
message:"密码长度必须小于{0}"
},
//验证两次密码是否一致
equalTo: {
validator: function (value, param){
return $(param[0]).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', "恭喜您,注册成功!");
}
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Net设计模式实例之单例模式( Singleton Pattern)
一、单例模式简介(Brief Introduction) 单例模式(Singleton Pattern),保证一个类只有一个实例,并提供一个访问它的全局访问点。单例模式因为Singleton封装它的唯一实例,它就可以严格地控制客户怎样访问它以及何时访问它。
743 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9494 0
jQuery 表单验证扩展(五)
大概在一个月之前,自己尝试着写一个jQuery的表单验证插件,当初的目的并不是为了让这个插件流行起来,只是为了自己学习的需要。由于工作的问题,这个问题一直处于停留的状态。前些天报名参加了那个什么博客大赛,最近未写一篇博客,当然本文也不是了参加什么博客大赛而写,只是作为自己学习的积累。
976 0
100多个经典常用的jQuery插件大全实例演示和下载
100多个经典常用的jQuery插件大全实例演示和下载  更多 > 07-31 cropped仿新浪微博头像上传裁剪缩小放大预览 07-29 prettyPhoto和fancybo...
2933 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10843 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13177 0
下拉菜单;手风琴;九宫格的Jquery的使用实例
下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 下拉.gif 代码如下: 下拉菜单 li{ width: 80px; ...
934 0
133
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载