nice Validator使用文档:http://niceue.com/validator/

一、自定义验证规则:

  1. //大类表单新增修改验证提交
  2. $("#addbigCategory").validator({
  3. theme :"simple_bottom",
  4. rules:{
  5. coursecatename :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
  6. },
  7. fields: {
  8. coursecatename: "类别名称:required;length[1~50];coursecatename;"//,
  9. //sortIndex:"序号:required;"
  10. },
  11. valid: function(form){
  12. var tname=$(".dialog_title").text();
  13. if(tname.indexOf("修改")>=0){
  14. //修改保存
  15. SaveEditBigCourseCate();
  16. }else{
  17. //新增保存
  18. SaveAddBigCourseCate();
  19. }
  20.  
  21. }
  22. });
  1.       //新增修改 验证提交
  2. $("#addCategory").validator({//form表单
  3. theme :"simple_bottom",
  4. rules:{
               //自定义验证规则
  5. name :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
  6. sortIndexOnly:function(){}, //sortIndex去重检索
  7. nameOnly:function(){},//name去重检索
  8. },
  9. message:{
  10. required:"该项为必填项",
  11. },
  12. fields: {
  13. name:"类别名称:required;length[1~50];name;",
  14. },
  15. valid: function(form){
  16. var tname=$(".dialog_title").text();
  17. if(tname.indexOf("修改")>=0){
  18. SaveEditTeacherCate(); //修改保存
  19. }else{
  20. SaveAddTeacherCate(); //新增保存
  21. }
  22. }
  23. });
  1.      <form id="addCategory">
  2. <div class="dialog_body">
  3. <div class="formula_itemlist">
  4. <ul class="itemwindow">
  5. <!-- <li><span>序&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span></li> -->
  6. <input type="hidden" id="teachersortindex" name="sortIndex" placeholder="请填数字"/>
  7. <li><span>类别名称:</span>
  8. <input type="text" id="teachercatename" name="name" placeholder="50字以内"/>
  9. </li>
  10. <input type="hidden" id="teachercateid" name="id" />
  11. </ul>
  12.  
  13. </div>
  14. </div>
  15. <div class="dialog_bottom">
  16. <button type="button" id="cancel">取消</button>
  17. <button type="submit">保存</button>
  18. </div>
  19. </form>

效果如图:

二、销毁验证信息:

1、修改时,第一次输入错误信息,出现验证提示信息后,再输入正确信息,回车修改成功;

2、然后在弹出修改窗口时,会显示验证错误提示信息,如下图所示:

  

  

解决这个BUG方法:在回车提交表单时,加入销毁验证信息事件:

JS代码:

  1. //新增课程大类弹窗
  2. $("#addbutton").on("click",function(obj){
  3. $(".dialog_title").text("新增一级分类");
  4. addWin.showPopup();
  5. });
  6. //新增课程子类弹窗
  7. $("#rightaddbutton").on("click",function(obj){
  8. $(".dialog_title").text("新增二级分类");
  9. addSmallWin.showPopup();
  10. var pname = $("#parentId").val();
  11. if(pname!=""){
  12. $("#pname").val(pname); //父类
  13. }
  14. });
  15.  
  16. //大类表单新增修改验证提交
  17. $("#addbigCategory").validator({
  18. theme :"simple_bottom",
  19. rules:{
  20. coursecatename :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
  21. },
  22. fields: {
  23. coursecatename: "类别名称:required;length[1~50];coursecatename;"//,
  24. //sortIndex:"序号:required;"
  25. },
  26. valid: function(form){
  27. var tname=$(".dialog_title").text();
  28. if(tname.indexOf("修改")>=0){
  29. //修改保存
  30. SaveEditBigCourseCate();
  31. }else{
  32. //新增保存
  33. SaveAddBigCourseCate();
  34. }
  35. }
  36. });
  37.  
  38. //小类表单新增修改验证提交
  39. $("#addsmallCategory").validator({
  40. theme :"simple_bottom",
  41. rules:{
  42. sonname :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
  43. },
  44. fields: {
  45. pname: "类别名称:required;",
  46. //coursesortindex:"序号:required;",
  47. sonname:"类别名称:required;length[1~50];sonname;"
  48. },
  49. valid: function(form){
  50. var tname=$(".dialog_title").text();
  51. if(tname.indexOf("修改")>=0){
  52. //修改保存
  53. SaveEditSmallCourseCate();
  54. }else{
  55. //新增保存
  56. SaveAddSmallCourseCate();
  57. }
  58. }
  59. });
  1. //保存大类
  2. function SaveAddBigCourseCate(){
  3. var name = $.trim($("#coursecatename").val());
  4. var sortIndex=$("#sortIndex").val();
  5. var param={name:name,sortIndex:sortIndex};
  6.  
  7. $.ajax({
  8. url:"${ctx}/td/courseType/checkCourseType.do",
  9. type:"get",
  10. data:param,
  11. success:function(data){
  12. if(data=="ok"){
  13. $.ajax({
  14. url:"${ctx}/td/courseType/insert.do",
  15. type:"get",
  16. data:param,
  17. success:function(data){
  18. if(data.result=="true"){
  19. new AlertWin().initfn({
  20. "tipscon":data.resultDesc,
  21. "showtime":2000
  22. });
  23. $("#addbigCategory")[0].reset();
  24. addWin.close();
  25. loadBigData();
  26. }else{
  27. new AlertWin().initfn({
  28. "tipscon":data.resultDesc,
  29. "showtime":2000
  30. });
  31. }
  32. }
  33. });
  34. }else{
  35. addWin.close();
  36. new AlertWin().initfn({
  37. "tipscon":'新增失败,该课程类别已存在!',
  38. "showtime":2000
  39. });
  40. }
  41. }
  42. });
  43. //销毁验证信息,防止回车提交后,再次弹出时出现验证提示信息
  44. $("#addbigCategory").validator("destroy");
  45. }
  46.  
  47. //保存小类
  48. function SaveAddSmallCourseCate(){
  49. var sortIndex=$("#coursesortindex").val();
  50. var pid= $("#pname").val();
  51. var sonname = $.trim($("#sonname").val());
  52. console.log();
  53. var param={sortIndex:sortIndex,parentId:pid,name:sonname};
  54.  
  55. $.ajax({
  56. url:"${ctx}/td/courseType/checkCourseType.do",
  57. type:"get",
  58. data:param,
  59. success:function(data){
  60. if(data=="ok"){
  61. $.ajax({
  62. url:"${ctx}/td/courseType/insert.do",
  63. type:"get",
  64. data:param,
  65. success:function(data){
  66. if(data.result=="true"){
  67. new AlertWin().initfn({
  68. "tipscon":data.resultDesc,
  69. "showtime":2000
  70. });
  71. $("#addsmallCategory")[0].reset();
  72. addSmallWin.close();
  73. loadSmallData();
  74. }else{
  75. new AlertWin().initfn({
  76. "tipscon":data.resultDesc,
  77. "showtime":2000
  78. });
  79. }
  80. }
  81. });
  82. }else{
  83. addSmallWin.close();
  84. new AlertWin().initfn({
  85. "tipscon":'新增失败,该课程类别已存在!',
  86. "showtime":2000
  87. });
  88. }
  89. }
  90. });
  91. //销毁验证信息,防止回车提交后,再次弹出时出现验证提示信息
  92. $("#addsmallCategory").validator("destroy");
  93. }

HTML代码:

  1. <!--新增课程大类-->
  2. <div class="dialog_coursecategory" id="addDialog" style="width: 350px;">
  3. <div class="dialog_title" data-operateType="add">新增一级分类</div>
  4. <form id="addbigCategory">
  5. <div class="dialog_body" style="height:100px;">
  6. <div class="formula_itemlist">
  7. <ul class="itemli">
  8. <!-- <li><span>序&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span></li> -->
  9. <input type="hidden" id="sortIndex" name="sortIndex" placeholder="请填数字"/>
  10. <li><span>类别名称:</span><input type="text" id="coursecatename" data-id="id" name="coursecatename" placeholder="50字以内"/></li>
  11. <input type="hidden" id="coursecatecorpId" name="corpId" />
  12. </ul>
  13. </div>
  14. </div>
  15. <div class="dialog_bottom">
  16. <button type="button" id="cancel1">取消</button>
  17. <button type="submit">保存</button>
  18. </div>
  19. </form>
  20. </div>
  21.  
  22. <!--新增课程子类 -->
  23. <div class="dialog_coursecategory" id="addsmallDialog" style="width: 350px;">
  24. <div class="dialog_title" data-operateType="add">新增二级分类</div>
  25. <form id="addsmallCategory">
  26. <div class="dialog_body">
  27. <div class="formula_itemlist">
  28. <ul class="itemli">
  29. <!-- <li><span>序&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span> -->
  30. <input type="hidden" id="coursesortindex" name="coursesortindex" placeholder="请填数字"/></li>
  31. <li><span>父类名称:</span><select id="pname" name="pname" placeholder="1~100字以内"/></select></li>
  32. <li><span>类别名称:</span><input type="text" id="sonname" data-id="id" name="sonname" placeholder="50字以内"/></li>
  33. <input type="hidden" id="soncorpId" name="corpId" />
  34. </ul>
  35. </div>
  36. </div>
  37. <div class="dialog_bottom">
  38. <button type="button" id="cancel2">取消</button>
  39. <button type="submit">保存</button>
  40. </div>
  41. </form>
  42. </div>

 二、解决新增、修改弹窗时,验证不通过,第一次提交失败,第二次提交却可以(在弹出提示信息后面加 return;)

  1. //新增修改 验证提交
  2. function createBig(){
  3. $("#formId").validator({
  4. theme :"simple_bottom",
  5. rules:{
  6. name :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
  7. sortIndexOnly:function(){}, //sortIndex去重检索
  8. nameOnly:function(){},//name去重检索
  9. },
  10. fields: {
  11. name:"姓名:required;length[1~30];name;",
  12. title:"等级:length[0~30];name;",
  13. phone:"电话:required;mobile;",
  14. email:"邮箱:length[0~50];email;",
  15. proField:"length[0~200];",
  16. intro:"length[0~200];"
  17. },
  18. valid: function(form){
  19. var tname = $(".dialog_title").text();
  20. var headImg = $("#head_img").attr("data-img");
  21. if(headImg=="head_default.jpg"){
  22. headImg=null;
  23. }
  24.  
  25. if(tname.indexOf("修改")>=0){
  26. //修改保存
  27. var labels = "";
  28. var index = 0;
  29. $(".labels").find("li").each(function(){
  30. if(index==0){
  31. labels += "'" + $(this).attr("data-id") + "'";
  32. }else{
  33. labels += ",'"+$(this).attr("data-id") + "'";
  34. }
  35. index++;
  36. });
  37.  
  38. var param={id:$("#id").val(),headImg:headImg,name:$.trim($("#name").val()),title:$.trim($("#title").val()),phone:$.trim($("#phone").val()),email:$.trim($("#email").val()),proField:$.trim($("#proField").val()),trainerTypeId:$("#trainerTypeId_add").val(),intro:$.trim($("#intro").val()),labels:labels };
  39. var param_a = {name:$.trim($("#name").val()),phone:$.trim($("#phone").val()),id:$("#id").val() };
  40. $.ajax({
  41. url:"${ctx}/td/trainer/checkTrainer.do",
  42. type:"get",
  43. cache:false,
  44. data:param_a,
  45. success:function(data){
  46. if(data=="ok"){
  47. $.ajax({
  48. url:"${ctx}/td/trainer/modify.do",
  49. type:"get",
  50. data:param,
  51. success:function(data){
  52. if(data.result=="true"){
  53. new AlertWin().initfn({
  54. "tipscon":data.resultDesc,
  55. "showtime":2000
  56. });
  57. $("#formId")[0].reset();
  58. addWin.close();
  59. }else{
  60. new AlertWin().initfn({
  61. "tipscon":data.resultDesc,
  62. "showtime":2000
  63. });
  64. return; //防止提交一次失败,二次提交却可以
  65. }
  66. $("#searchbtn").trigger("click");
  67. getLabels();
  68. }
  69. });
  70. }else{
  71. new AlertWin().initfn({
  72. "tipscon":'修改失败,该讲师已存在!',
  73. "showtime":2000
  74. });
  75. return; //防止提交一次失败,二次提交却可以
  76. }
  77.  
  78. //销毁验证信息,防止回车提交后,再次弹出时出现验证提示信息
  79. $("#formId").validator("destroy");
  80. }
  81. });
  82.  
  83. }else{
  84. //新增
  85. var labels = "";
  86. var index = 0;
  87. $(".labels").find("li").each(function(){
  88. if(index==0){
  89. labels += "'" + $(this).attr("data-id") + "'";
  90. }else{
  91. labels += ",'"+$(this).attr("data-id") + "'";
  92. }
  93. index++;
  94. });
  95.  
  96. var param={headImg:headImg,name:$.trim($("#name").val()),title:$.trim($("#title").val()),phone:$.trim($("#phone").val()),email:$.trim($("#email").val()),proField:$.trim($("#proField").val()),trainerTypeId:$("#trainerTypeId_add").val(),intro:$.trim($("#intro").val()),labels:labels };
  97.  
  98. var param_a = {name:$.trim($("#name").val()),phone:$.trim($("#phone").val()) };
  99. $.ajax({
  100. url:"${ctx}/td/trainer/checkTrainer.do",
  101. type:"get",
  102. cache:false,
  103. data:param_a,
  104. success:function(data){
  105. if(data=="ok"){
  106. $.ajax({
  107. url:"${ctx}/td/trainer/insert.do",
  108. type:"get",
  109. cache:false,
  110. data:param,
  111. success:function(data){
  112. if(data.result=="true"){
  113. new AlertWin().initfn({
  114. "tipscon":data.resultDesc,
  115. "showtime":2000
  116. });
  117. $("#formId")[0].reset();
  118. addWin.close();
  119. }else{
  120. new AlertWin().initfn({
  121. "tipscon":data.resultDesc,
  122. "showtime":2000
  123. });
  124. return; //防止提交一次失败,二次提交却可以
  125. }
  126. $("#searchbtn").trigger("click");
  127. getLabels();
  128. }
  129. });
  130. }else{
  131. new AlertWin().initfn({
  132. "tipscon":'新增失败,该讲师已存在!',
  133. "showtime":2000
  134. });
  135. return; //防止提交一次失败,二次提交却可以
  136. }
  137.  
  138. //销毁验证信息,防止回车提交后,再次弹出时出现验证提示信息
  139. $("#formId").validator("destroy");
  140. }
  141. });
  142.  
  143. }
  144.  
  145. }
  146. });
  147. }
  148.  
  149. //弹出新增窗口
  150. function addTeacher() {
  151.  
  152. var html=" <i class='iconfont closeWin' id='close_add'></i>";
  153. $("#addDialog").find(".dialog_title").attr("data-operateType","add").html("新增").append(html);
  154.  
  155. $("#addtag-cancel").trigger("click"); //恢复未点击状态
  156. //头像
  157. $("#head_img").attr("src","${ctx}/static/images/common/head_default.jpg");
  158. $("#head_img").attr("data-img","head_default.jpg");
  159. $("#labels li").remove();//清空标签
  160. $("#trainerTypeId_add option:selected").attr("selected",false);//清空下拉框选中项
  161.  
  162. addWin.showPopup();
  163. $("#close_add").on("click",function(){
  164. $("#formId")[0].reset();
  165. addWin.close();
  166. });
  167.  
  168. createBig(); //初始化验证信息
  169.  
  170. upLoadPic();
  171. }
  172.  
  173. //弹出修改窗口
  174. function editTeacher() {
  175. var selectObj = table.selectedRowsIndex();
  176. var selectItem = table.row(selectObj[0]);
  177.  
  178. if(selectObj.length==0){
  179. new AlertWin().initfn({
  180. "tipscon":"请先选择数据!",
  181. "showtime":2000
  182. });
  183. }else if(selectObj.length>1){
  184. new AlertWin().initfn({
  185. "tipscon":"只能选择一条数据进行修改!",
  186. "showtime":2000
  187. });
  188. }else if(selectObj.length==1){
  189. $("#formId").fill(selectItem);
  190. var html=" <i class='iconfont'id='close_edit'></i>";
  191. $("#addDialog").find(".dialog_title").attr("data-operateType","add").html("修改").append(html);
  192.  
  193. $("#addtag-cancel").trigger("click"); //恢复未点击状态
  194.  
  195. $("#id").val(selectItem.id);
  196. $("#name").val(selectItem.name);
  197. $("#title").val(selectItem.title);
  198. $("#recommend").val(selectItem.recommend);
  199.  
  200. if(selectItem.trainerTypeId!=""){
  201. $("#trainerTypeId_add").find("option[value="+selectItem.trainerTypeId+"]").attr("selected",true);
  202. }
  203. $("#phone").val(selectItem.phone);
  204. $("#email").val(selectItem.email);
  205. $("#proField").val(selectItem.proField);
  206. $("#intro").val(selectItem.intro);
  207. //头像
  208. if(selectItem.headImg!=""){
  209. $("#head_img").attr("src","${ctx}/upload/trainer_picture/"+selectItem.headImg);
  210. $("#head_img").attr("data-img",selectItem.headImg);
  211. }else{
  212. $("#head_img").attr("src","${ctx}/static/images/common/head_default.jpg");
  213. $("#head_img").attr("data-img","head_default.jpg");
  214. }
  215.  
  216. //标签
  217. var trainerLabels = selectItem.labels;
  218. $("#tagName").val("");
  219. $("#labels li").remove();//清空标签
  220.  
  221. if(trainerLabels!=null){
  222. $.ajax({
  223. url:"${ctx}/td/trainer/queryLabelListByIds.do",
  224. type:"get",
  225. cache:false,
  226. data:{trainerLabels : trainerLabels },
  227. success:function(data){
  228. var bean=data.beans;
  229. var html="";
  230. if(bean.length!=0){
  231. for(var i=0;i<bean.length;i++){
  232. var data=bean[i];
  233. $(".labels").append("<li class='signli' data-id='"+data.id+"' data-trainerLabel='"+data.trainerLabel+"'><span>"+data.trainerLabel+"</span><i class='iconfont' onclick='delLable(this)'></i></li>");
  234. }
  235. }
  236. }
  237. });
  238.  
  239. }
  240.  
  241. addWin.showPopup();
  242. $("#close_edit").on("click",function(){
  243. $("#formId")[0].reset();
  244. addWin.close();
  245. });
  246.  
  247. createBig(); //初始化验证信息
  248.  
  249. upLoadPic();
  250. }
  251. }

表单验证:nice Validator的更多相关文章

  1. jquery插件-表单验证插件-validator对象

    三 Validator对象 1.介绍:Validate方法返回的对象称作Validator对象 2.使用 Validator对象常用方法 Validator.form() 返回:Boolean 验证: ...

  2. jQuery 表单验证 jquery.validator.js

    前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...

  3. 表单验证插件-validator.js 使用教程

    做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表 ...

  4. 自定义表单验证--jquery validator addMethod的使用

    原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...

  5. layer,Jquery,validate实现表单验证,刷新页面,关闭子页面

    1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...

  6. jquery 表单验证插件

    其他: <form action=""> First name: <input type="text" name="FirstNam ...

  7. Nice validator领先的表单验证解决方案 转

    Nice validator是一个简单智能的Web表单验证插件,可以验证现有的所有格式,比如邮箱地址.电话号码等,您还可以自定义规则验证,插件基于jQuery库,支持多种语言配置. 安装 1.您可以访 ...

  8. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  9. element-ui+vuex共享自定义方法进行表单验证 validator

    element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...

  10. angular4 自定义表单验证Validator

    表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...

随机推荐

  1. Unity初探—SpaceShoot

    Unity初探—SpaceShoot DestroyByBoundary脚本(C#) 在游戏中我们添加了一个Cube正方体,让他来作为游戏的边界.它是可以触发触发事件的(勾选Is Trigger),当 ...

  2. 如何编写 Python 程序

    如何编写 Python 程序 从今以后,保存和运行 Python 程序的标准步骤如下: 对于 PyCharm 用户 打开 PyCharm. 以给定的文件名创建新文件. 输入案例中给出的代码. 右键并运 ...

  3. 365. Count 1 in Binary【LintCode java】

    Description Count how many 1 in binary representation of a 32-bit integer. Example Given 32, return  ...

  4. django 增删改查操作 数据库Mysql

    下面介绍一下django增删改查操作: 1.view.py # -*- coding: utf-8 -*-from __future__ import unicode_literalsfrom dja ...

  5. Learning Spatial-Temporal Regularized Correlation Filters for Visual Tracking---随笔

    Learning Spatial-Temporal Regularized Correlation Filters for Visual Tracking DCF跟踪算法因边界效应,鲁棒性较差.SRD ...

  6. 基于深度学习的中文语音识别系统框架(pluse)

    目录 声学模型 GRU-CTC DFCNN DFSMN 语言模型 n-gram CBHG 数据集 本文搭建一个完整的中文语音识别系统,包括声学模型和语言模型,能够将输入的音频信号识别为汉字. 声学模型 ...

  7. C语言链接数据库

    一.解释一下函数功能和用法 1.mysql_real_connect 函数原型:MYSQL *mysql_real_connect(MYSQL *mysql, const char *host, co ...

  8. 最全NB-IoT/eMTC物联网解决方案名录汇总

    NB-IoT/eMTC等蜂窝物联网技术的成熟和商用,占据低功耗广域网络(LPWAN)的主流地位,推动全球物联网新一轮发展热潮,越来越多的行业开始采用物联网方案来解决解决实际问题.实现落地应用,越来越多 ...

  9. VUE中组件的使用

    关于vue组件引用 使用Nodejs的方法 被引用的组件要暴露 module.exports={}; 引用时 用 var abc= require("组件的路径") 然后 就可以用 ...

  10. 11.24Daily Scrum

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.990 测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.991 测试 王宇杰 负责后台代码测 ...