表单验证：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(); } }
