1.引入jquery validate和zui

<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="${_b}/style/jquery-1.11.0.min.js"></script>
<script src="${_b}/style/other/jquery.validate.js" type="text/javascript"></script>
<script src="${_b}/style/other/jquery.validate.sc.js" type="text/javascript"></script>
<!-- ZUI Javascript组件 -->
<script src="${_b}/style/zui-1.8.1/js/zui.min.js"></script>

2.表单

 <tr>
<td width="150" class="t-align_r">登录账号:</td>
<td><input id="userLoginName" name="userLoginName" type="text" class="table_input" style="width:600px;" data-toggle="tooltip" data-original-title=""><span></span></td>
<td width="400"><span class="redword">*</span><span class="greyword">由字母、数字组成,长度为6-20个字符</span></td>
</tr>
<tr>
<td class="t-align_r">登录密码:</td>
<td><input name="userPwd" id="pwd" type="password" class="table_input" style="width:600px;" data-toggle="tooltip" data-original-title=""></td>
<td><span class="redword">*</span><span class="greyword">由字母、数字组成,长度为6-16个字符</span></td>
</tr>
<tr>
<td class="t-align_r">确认密码:</td>
<td><input type="password" name="ruserPwd" id="rpwd" class="table_input" style="width:600px;" data-toggle="tooltip" data-original-title=""></td>
<td><span class="redword">*</span><span class="greyword">再次输入登录密码</span></td>
</tr>
注意:<input />标签中data-toggle="tooltip" data-original-title="" 是引入zui的样式
需要在script中初始化

3.javascript

<script>
$(function(){ //初始化
$('[data-toggle="tooltip"]').tooltip(); $('#saveBtn').click(function(){
if($("#form1").valid()){
$("#form1").submit();
}else{
var msg = new top.$.zui.Messager('提示消息:请检查字段合法性', {
type : 'warning',
fade : true,
icon : 'warning-sign',
time : 2000,
scale : true
});
msg.show();
}
}); //表单验证 begin
$("#form1").validate({
onsubmit: false, //关闭提交验证
errorElement: "em",
errorPlacement: function(error, element) {
element[0].setAttribute("data-original-title",error[0].innerText);
},
success: function(label) {
label.text("").addClass("success");
},
rules: {
userLoginName:{required:true,rangelength:[6,20],userLoginName:true},
userPwd:{required:true,rangelength:[6,16],pwd:true},
ruserPwd:{required:true,notEqualTo:"#pwd"},
sbdwmc:{required:true},
zslx:{required:true},
zsbh:{required:true},
dwlxdh:{phone:true},
userName:{required:true,rangelength:[2,30]},
sfzh:{required:true},
userEmail:{required:true,email:true},
userMobile:{required:true,isMobile:true,mobileCheck:true},
}, });
//表单验证 end //添加获取短信 验证码事件 begin
$("#Captcha").click(function(){
console.log(1);
if($("#form1").validate().element($("#userMobile"))){
console.log(2);
var c = 60;
$.post("getSmsCaptcha",{phone: $('#userMobile').val()},function(data){
console.log(data);
if(data.success){
$('#SMSCODE_').val(data.msg);
$('#Captcha').hide();
$('#Captcha').after("<font id=info color=green size=2>发送验证码成功!</font><span id=count>60</span><span id=cc>秒后重新发送</span>");
}
},'json');
var timer = setInterval(function(){
$("#count").html(c-1);
c--;
if(c==0){
$("#info").remove();
$("#count").remove();
$("#cc").remove();
$('#Captcha').show();
clearInterval(timer);
}
},1000);
}else{
var msg = new top.$.zui.Messager('提示消息:请输入正确的手机号', {
type : 'warning',
fade : true,
icon : 'warning-sign',
time : 2000,
scale : true
});
msg.show();
} });
//添加获取短信 验证码事件 end // userLoginName验证
jQuery.validator.addMethod("userLoginName", function(value, element) {
var chrnum = /[a-z|A-Z|0-9]{6,20}$/;
return this.optional(element) || (chrnum.test(value));
}, "格式不正确"
);
// pwd验证
jQuery.validator.addMethod("pwd", function(value, element) {
var chrnum = /[a-z|A-Z|0-9]{6,16}$/;
return this.optional(element) || (chrnum.test(value));
}, "格式不正确"
);
// 验证两次密码是否一致
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
return value == $(param).val();
}, "两次密码输入不一致!"
);
// 电话号码验证
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "请正确输入身份证号码");
// 手机号的验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var chrnum = /^1[3|4|5|7|8|9|][0-9]{9}$/;
return this.optional(element) || (chrnum.test(value));
}, "请输入正确的手机号码"
);
// 手机号是否注册的验证
jQuery.validator.addMethod("mobileCheck",function(value,element){
var flag = true;
var result = '';
$.ajax({
url : "userVMobile1",
data : {
userMobile : value
},
async :false,
dataType : 'json',
success : function(data){
console.log(data);
if(data.success){
flag = true;
}else{
flag = false;
result = data.msg;
}
}
});
$.validator.messages.mobileCheck = result;
return flag;
}); })
</script>

4.效果图

使用jquery validate结合zui作表单验证的更多相关文章

  1. jQuery Validate【强大的表单验证】

    一.引入菜鸟教程提供的 1.14.0 版本下载地址:http://static.runoob.com/download/jquery-validation-1.14.0.zip <script ...

  2. jquery.validate.js之自定义表单验证规则

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  4. jQuery应用实例5:表单验证

    1.validation插件的使用: 入门案例: <html> <head> <meta charset="UTF-8"> <title& ...

  5. jQuery常用插件与jQuery使用validation插件实现表单验证实例

    jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...

  6. jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  7. 【表单验证】基于jQuery的高度灵活的表单验证(无UI)

    表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...

  8. 用jquery写自己的form表单验证

    这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...

  9. JQuery制作网页——第九章 表单验证

    1.  表单验证:减轻服务器的压力.保证输入的数据符合要求: 2.  常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3.  表单验证的思路: 1.     ...

随机推荐

  1. javascript 时间格式化方法

    对jquery进行扩展的方法: //对时间格式化(jquery方法扩展) Date.prototype.Format = function (fmt) { //author: meizz var o ...

  2. HDU 4871 Shortest-path tree

    先用dijkstra把最短路树建出来,然后就是树的质心分治了. 经过k个点的路径,要么全在子树上,要么经过根结点,因此可以分治. 如果分治的时候选点不好会变成O(n^2),比较极端的情况是比如树是一条 ...

  3. C++之string基本字符系列容器

    string基本字符系列容器 C语言只提供了一个插入类型用来处理字符, 而对于字符串, 只能通过字符串数组来处理, 显得十分不便. C++STL提供了string基本字符系列容器来处理字符串, 可以把 ...

  4. hihoCoder 网络流四·最小路径覆盖

    题面带解释 hihoCoder感觉很好. 网络流的精华就是建图 #include<cstdio> #include<iostream> #include<algorith ...

  5. Shell编程学习之重定向

    这一篇讲一下重定向 有些时候你想要保存某些命令产生的输出而不是在显示器上显示它. 为了应对这样的问题 bash shell 也就提供了一些重定向的操作符. 我们先了解一些基本的应用. 输出重定向 输出 ...

  6. 旧文备份:Python国际化支持

    Python通过gettext模块支持国际化(i18n),可以实现程序的多语言界面的支持,下面是我的多语言支持实现: 在python安装目录下的./Tools/i18n/(windows下例 D:\P ...

  7. path、classpath理解

    path.classpath最常见的场景:环境变量配置 path环境变量:设置path的作用是让操作系统可以找到JDK命令(指定了JDK命令搜索路径):path环境变量原来Windows里面就有,只需 ...

  8. C#中类的成员

    一.C#中类的成员 1. 类的成员 类中的数据和函数都称为类的成员.类的成员可以分为两类: ?类本身所声明的. ?从基类中继承来的. 如果在类声明中没有指定基类,则该类将继承System.Object ...

  9. cnn中的fp和bp推导

    昨天下午在单位从新推导了一遍fp和bp. 在整个网络的训练中,最关键的就是计算残差. 最后一层残差很容易,那么前面每一层的残差怎么计算呢? 总体来说,有多少权重就需要多少残差项来进行权重更新.每个权重 ...

  10. BIO与NIO

    BIO与NIO 1.传统BIO (1)特点 面向数据流 阻塞式传输 一个客户端对应一个线程 在客户机增多的情况下,线程资源随之增多,会造成cpu资源枯竭 (2)需求 ​ 客户机向服务器输出字符串,逐一 ...