表单验证: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 ...
随机推荐
- Unity初探—SpaceShoot
Unity初探—SpaceShoot DestroyByBoundary脚本(C#) 在游戏中我们添加了一个Cube正方体,让他来作为游戏的边界.它是可以触发触发事件的(勾选Is Trigger),当 ...
- 如何编写 Python 程序
如何编写 Python 程序 从今以后,保存和运行 Python 程序的标准步骤如下: 对于 PyCharm 用户 打开 PyCharm. 以给定的文件名创建新文件. 输入案例中给出的代码. 右键并运 ...
- 365. Count 1 in Binary【LintCode java】
Description Count how many 1 in binary representation of a 32-bit integer. Example Given 32, return ...
- django 增删改查操作 数据库Mysql
下面介绍一下django增删改查操作: 1.view.py # -*- coding: utf-8 -*-from __future__ import unicode_literalsfrom dja ...
- Learning Spatial-Temporal Regularized Correlation Filters for Visual Tracking---随笔
Learning Spatial-Temporal Regularized Correlation Filters for Visual Tracking DCF跟踪算法因边界效应,鲁棒性较差.SRD ...
- 基于深度学习的中文语音识别系统框架(pluse)
目录 声学模型 GRU-CTC DFCNN DFSMN 语言模型 n-gram CBHG 数据集 本文搭建一个完整的中文语音识别系统,包括声学模型和语言模型,能够将输入的音频信号识别为汉字. 声学模型 ...
- C语言链接数据库
一.解释一下函数功能和用法 1.mysql_real_connect 函数原型:MYSQL *mysql_real_connect(MYSQL *mysql, const char *host, co ...
- 最全NB-IoT/eMTC物联网解决方案名录汇总
NB-IoT/eMTC等蜂窝物联网技术的成熟和商用,占据低功耗广域网络(LPWAN)的主流地位,推动全球物联网新一轮发展热潮,越来越多的行业开始采用物联网方案来解决解决实际问题.实现落地应用,越来越多 ...
- VUE中组件的使用
关于vue组件引用 使用Nodejs的方法 被引用的组件要暴露 module.exports={}; 引用时 用 var abc= require("组件的路径") 然后 就可以用 ...
- 11.24Daily Scrum
人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.990 测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.991 测试 王宇杰 负责后台代码测 ...