表单验证：nice Validator
nice Validator使用文档：http://niceue.com/validator/
一、自定义验证规则：
//大类表单新增修改验证提交
$("#addbigCategory").validator({
theme :"simple_bottom",
rules:{
coursecatename :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
},
fields: {
coursecatename: "类别名称:required;length[1~50];coursecatename;"//,
//sortIndex:"序号:required;"
},
valid: function(form){
var tname=$(".dialog_title").text();
if(tname.indexOf("修改")>=0){
//修改保存
SaveEditBigCourseCate();
}else{
//新增保存
SaveAddBigCourseCate();
} }
});
//新增修改 验证提交
$("#addCategory").validator({//form表单
theme :"simple_bottom",
rules:{
//自定义验证规则
name :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
sortIndexOnly:function(){}, //sortIndex去重检索
nameOnly:function(){},//name去重检索
},
message:{
required:"该项为必填项",
},
fields: {
name:"类别名称:required;length[1~50];name;",
},
valid: function(form){
var tname=$(".dialog_title").text();
if(tname.indexOf("修改")>=0){
SaveEditTeacherCate(); //修改保存
}else{
SaveAddTeacherCate(); //新增保存
}
}
});
<form id="addCategory">
<div class="dialog_body">
<div class="formula_itemlist">
<ul class="itemwindow">
<!-- <li><span>序 号:</span></li> -->
<input type="hidden" id="teachersortindex" name="sortIndex" placeholder="请填数字"/>
<li><span>类别名称:</span>
<input type="text" id="teachercatename" name="name" placeholder="50字以内"/>
</li>
<input type="hidden" id="teachercateid" name="id" />
</ul> </div>
</div>
<div class="dialog_bottom">
<button type="button" id="cancel">取消</button>
<button type="submit">保存</button>
</div>
</form>
效果如图：
二、销毁验证信息：
1、修改时，第一次输入错误信息，出现验证提示信息后，再输入正确信息，回车修改成功；
2、然后在弹出修改窗口时，会显示验证错误提示信息，如下图所示：
解决这个BUG方法：在回车提交表单时，加入销毁验证信息事件：
JS代码：
//新增课程大类弹窗
$("#addbutton").on("click",function(obj){
$(".dialog_title").text("新增一级分类");
addWin.showPopup();
});
//新增课程子类弹窗
$("#rightaddbutton").on("click",function(obj){
$(".dialog_title").text("新增二级分类");
addSmallWin.showPopup();
var pname = $("#parentId").val();
if(pname!=""){
$("#pname").val(pname); //父类
}
}); //大类表单新增修改验证提交
$("#addbigCategory").validator({
theme :"simple_bottom",
rules:{
coursecatename :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
},
fields: {
coursecatename: "类别名称:required;length[1~50];coursecatename;"//,
//sortIndex:"序号:required;"
},
valid: function(form){
var tname=$(".dialog_title").text();
if(tname.indexOf("修改")>=0){
//修改保存
SaveEditBigCourseCate();
}else{
//新增保存
SaveAddBigCourseCate();
}
}
}); //小类表单新增修改验证提交
$("#addsmallCategory").validator({
theme :"simple_bottom",
rules:{
sonname :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
},
fields: {
pname: "类别名称:required;",
//coursesortindex:"序号:required;",
sonname:"类别名称:required;length[1~50];sonname;"
},
valid: function(form){
var tname=$(".dialog_title").text();
if(tname.indexOf("修改")>=0){
//修改保存
SaveEditSmallCourseCate();
}else{
//新增保存
SaveAddSmallCourseCate();
}
}
});
//保存大类
function SaveAddBigCourseCate(){
var name = $.trim($("#coursecatename").val());
var sortIndex=$("#sortIndex").val();
var param={name:name,sortIndex:sortIndex}; $.ajax({
url:"${ctx}/td/courseType/checkCourseType.do",
type:"get",
data:param,
success:function(data){
if(data=="ok"){
$.ajax({
url:"${ctx}/td/courseType/insert.do",
type:"get",
data:param,
success:function(data){
if(data.result=="true"){
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
$("#addbigCategory")[0].reset();
addWin.close();
loadBigData();
}else{
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
}
}
});
}else{
addWin.close();
new AlertWin().initfn({
"tipscon":'新增失败，该课程类别已存在！',
"showtime":2000
});
}
}
});
//销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
$("#addbigCategory").validator("destroy");
} //保存小类
function SaveAddSmallCourseCate(){
var sortIndex=$("#coursesortindex").val();
var pid= $("#pname").val();
var sonname = $.trim($("#sonname").val());
console.log();
var param={sortIndex:sortIndex,parentId:pid,name:sonname}; $.ajax({
url:"${ctx}/td/courseType/checkCourseType.do",
type:"get",
data:param,
success:function(data){
if(data=="ok"){
$.ajax({
url:"${ctx}/td/courseType/insert.do",
type:"get",
data:param,
success:function(data){
if(data.result=="true"){
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
$("#addsmallCategory")[0].reset();
addSmallWin.close();
loadSmallData();
}else{
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
}
}
});
}else{
addSmallWin.close();
new AlertWin().initfn({
"tipscon":'新增失败，该课程类别已存在！',
"showtime":2000
});
}
}
});
//销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
$("#addsmallCategory").validator("destroy");
}
HTML代码：
<!--新增课程大类-->
<div class="dialog_coursecategory" id="addDialog" style="width: 350px;">
<div class="dialog_title" data-operateType="add">新增一级分类</div>
<form id="addbigCategory">
<div class="dialog_body" style="height:100px;">
<div class="formula_itemlist">
<ul class="itemli">
<!-- <li><span>序 号:</span></li> -->
<input type="hidden" id="sortIndex" name="sortIndex" placeholder="请填数字"/>
<li><span>类别名称:</span><input type="text" id="coursecatename" data-id="id" name="coursecatename" placeholder="50字以内"/></li>
<input type="hidden" id="coursecatecorpId" name="corpId" />
</ul>
</div>
</div>
<div class="dialog_bottom">
<button type="button" id="cancel1">取消</button>
<button type="submit">保存</button>
</div>
</form>
</div> <!--新增课程子类 -->
<div class="dialog_coursecategory" id="addsmallDialog" style="width: 350px;">
<div class="dialog_title" data-operateType="add">新增二级分类</div>
<form id="addsmallCategory">
<div class="dialog_body">
<div class="formula_itemlist">
<ul class="itemli">
<!-- <li><span>序 号:</span> -->
<input type="hidden" id="coursesortindex" name="coursesortindex" placeholder="请填数字"/></li>
<li><span>父类名称:</span><select id="pname" name="pname" placeholder="1~100字以内"/></select></li>
<li><span>类别名称:</span><input type="text" id="sonname" data-id="id" name="sonname" placeholder="50字以内"/></li>
<input type="hidden" id="soncorpId" name="corpId" />
</ul>
</div>
</div>
<div class="dialog_bottom">
<button type="button" id="cancel2">取消</button>
<button type="submit">保存</button>
</div>
</form>
</div>
二、解决新增、修改弹窗时，验证不通过，第一次提交失败，第二次提交却可以（在弹出提示信息后面加 return;）
//新增修改 验证提交
function createBig(){
$("#formId").validator({
theme :"simple_bottom",
rules:{
name :[/^[\w\u4e00-\u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
sortIndexOnly:function(){}, //sortIndex去重检索
nameOnly:function(){},//name去重检索
},
fields: {
name:"姓名:required;length[1~30];name;",
title:"等级:length[0~30];name;",
phone:"电话:required;mobile;",
email:"邮箱:length[0~50];email;",
proField:"length[0~200];",
intro:"length[0~200];"
},
valid: function(form){
var tname = $(".dialog_title").text();
var headImg = $("#head_img").attr("data-img");
if(headImg=="head_default.jpg"){
headImg=null;
} if(tname.indexOf("修改")>=0){
//修改保存
var labels = "";
var index = 0;
$(".labels").find("li").each(function(){
if(index==0){
labels += "'" + $(this).attr("data-id") + "'";
}else{
labels += ",'"+$(this).attr("data-id") + "'";
}
index++;
}); 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 };
var param_a = {name:$.trim($("#name").val()),phone:$.trim($("#phone").val()),id:$("#id").val() };
$.ajax({
url:"${ctx}/td/trainer/checkTrainer.do",
type:"get",
cache:false,
data:param_a,
success:function(data){
if(data=="ok"){
$.ajax({
url:"${ctx}/td/trainer/modify.do",
type:"get",
data:param,
success:function(data){
if(data.result=="true"){
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
$("#formId")[0].reset();
addWin.close();
}else{
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
return; //防止提交一次失败，二次提交却可以
}
$("#searchbtn").trigger("click");
getLabels();
}
});
}else{
new AlertWin().initfn({
"tipscon":'修改失败，该讲师已存在！',
"showtime":2000
});
return; //防止提交一次失败，二次提交却可以
} //销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
$("#formId").validator("destroy");
}
}); }else{
//新增
var labels = "";
var index = 0;
$(".labels").find("li").each(function(){
if(index==0){
labels += "'" + $(this).attr("data-id") + "'";
}else{
labels += ",'"+$(this).attr("data-id") + "'";
}
index++;
}); 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 }; var param_a = {name:$.trim($("#name").val()),phone:$.trim($("#phone").val()) };
$.ajax({
url:"${ctx}/td/trainer/checkTrainer.do",
type:"get",
cache:false,
data:param_a,
success:function(data){
if(data=="ok"){
$.ajax({
url:"${ctx}/td/trainer/insert.do",
type:"get",
cache:false,
data:param,
success:function(data){
if(data.result=="true"){
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
$("#formId")[0].reset();
addWin.close();
}else{
new AlertWin().initfn({
"tipscon":data.resultDesc,
"showtime":2000
});
return; //防止提交一次失败，二次提交却可以
}
$("#searchbtn").trigger("click");
getLabels();
}
});
}else{
new AlertWin().initfn({
"tipscon":'新增失败，该讲师已存在！',
"showtime":2000
});
return; //防止提交一次失败，二次提交却可以
} //销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
$("#formId").validator("destroy");
}
}); } }
});
} //弹出新增窗口
function addTeacher() { var html=" <i class='iconfont closeWin' id='close_add'></i>";
$("#addDialog").find(".dialog_title").attr("data-operateType","add").html("新增").append(html); $("#addtag-cancel").trigger("click"); //恢复未点击状态
//头像
$("#head_img").attr("src","${ctx}/static/images/common/head_default.jpg");
$("#head_img").attr("data-img","head_default.jpg");
$("#labels li").remove();//清空标签
$("#trainerTypeId_add option:selected").attr("selected",false);//清空下拉框选中项 addWin.showPopup();
$("#close_add").on("click",function(){
$("#formId")[0].reset();
addWin.close();
}); createBig(); //初始化验证信息 upLoadPic();
} //弹出修改窗口
function editTeacher() {
var selectObj = table.selectedRowsIndex();
var selectItem = table.row(selectObj[0]); if(selectObj.length==0){
new AlertWin().initfn({
"tipscon":"请先选择数据！",
"showtime":2000
});
}else if(selectObj.length>1){
new AlertWin().initfn({
"tipscon":"只能选择一条数据进行修改！",
"showtime":2000
});
}else if(selectObj.length==1){
$("#formId").fill(selectItem);
var html=" <i class='iconfont'id='close_edit'></i>";
$("#addDialog").find(".dialog_title").attr("data-operateType","add").html("修改").append(html); $("#addtag-cancel").trigger("click"); //恢复未点击状态 $("#id").val(selectItem.id);
$("#name").val(selectItem.name);
$("#title").val(selectItem.title);
$("#recommend").val(selectItem.recommend); if(selectItem.trainerTypeId!=""){
$("#trainerTypeId_add").find("option[value="+selectItem.trainerTypeId+"]").attr("selected",true);
}
$("#phone").val(selectItem.phone);
$("#email").val(selectItem.email);
$("#proField").val(selectItem.proField);
$("#intro").val(selectItem.intro);
//头像
if(selectItem.headImg!=""){
$("#head_img").attr("src","${ctx}/upload/trainer_picture/"+selectItem.headImg);
$("#head_img").attr("data-img",selectItem.headImg);
}else{
$("#head_img").attr("src","${ctx}/static/images/common/head_default.jpg");
$("#head_img").attr("data-img","head_default.jpg");
} //标签
var trainerLabels = selectItem.labels;
$("#tagName").val("");
$("#labels li").remove();//清空标签 if(trainerLabels!=null){
$.ajax({
url:"${ctx}/td/trainer/queryLabelListByIds.do",
type:"get",
cache:false,
data:{trainerLabels : trainerLabels },
success:function(data){
var bean=data.beans;
var html="";
if(bean.length!=0){
for(var i=0;i<bean.length;i++){
var data=bean[i];
$(".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>");
}
}
}
}); } addWin.showPopup();
$("#close_edit").on("click",function(){
$("#formId")[0].reset();
addWin.close();
}); createBig(); //初始化验证信息 upLoadPic();
}
}
表单验证：nice Validator的更多相关文章
- jquery插件-表单验证插件-validator对象
三 Validator对象 1.介绍:Validate方法返回的对象称作Validator对象 2.使用 Validator对象常用方法 Validator.form() 返回:Boolean 验证: ...
- jQuery 表单验证 jquery.validator.js
前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...
- 表单验证插件-validator.js 使用教程
做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表 ...
- 自定义表单验证--jquery validator addMethod的使用
原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...
- layer,Jquery,validate实现表单验证，刷新页面，关闭子页面
1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...
- jquery 表单验证插件
其他: <form action=""> First name: <input type="text" name="FirstNam ...
- Nice validator领先的表单验证解决方案 转
Nice validator是一个简单智能的Web表单验证插件,可以验证现有的所有格式,比如邮箱地址.电话号码等,您还可以自定义规则验证,插件基于jQuery库,支持多种语言配置. 安装 1.您可以访 ...
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- element-ui+vuex共享自定义方法进行表单验证 validator
element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...
- angular4 自定义表单验证Validator
表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...
随机推荐
- ORACLE高级部分内容
1.pl/sql基本语句 DECLARE BEGIN END; / 循环语句 DECLARE I NUMBER(2):=1; BEGIN WHILE I<100 LOOP I:=I+1; EN ...
- JAVA基础学习之路（五）数组的定义及使用
什么是数组:就是一堆相同类型的数据放一堆(一组相关变量的集合) 定义语法: 1.声明并开辟数组 数据类型 数组名[] = new 数据类型[长度]: 2.分布完成 声明数组:数据类型 数组名 [] = ...
- LeetCode 141——环形链表
1. 题目 2. 解答 2.1 方法 1 定义快慢两个指针,慢指针每次前进一步,快指针每次前进两步,若链表有环,则快慢指针一定会相遇. /** * Definition for singly-link ...
- CryptoZombies学习笔记——Lesson4
第四课主要介绍payable函数相关. chapter1: payable修饰函数 以太坊允许同时调用函数和eth转账.msg.value显示发送到合约的以太币数,ether是内置整型数.如果函数没有 ...
- IMX6移植htop
top命令查看CPU利用率并不是很方便,因此打算移植htop到imx6上,主要包括以下几个步骤: - 资源下载 htop 下载http://hisham.hm/htop/releases/1.0.1/ ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- HDU 5794 A Simple Chess dp+Lucas
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5794 A Simple Chess Time Limit: 2000/1000 MS (Java/O ...
- DNS域名解析协议
一． 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后有一点),一般我们在浏览器里输入时会省略后面的点,而这也已经成为了习惯. 根域服 ...
- iOS- 优化与封装 APP音效的播放
1.关于音效 音效又称短音频,是一个声音文件,在应用程序中起到点缀效果,用于提升应用程序的整体用户体验. 我们手机里常见的APP几乎都少不了音效的点缀. 显示实现音效并不复杂,但对我们App很 ...
- MVC中验证码的实现（经常用，记录备用）
一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 二 正文 Ok,我们的验证码开始,这篇文章 ...