首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

轻松搞定js表单验证

Posted in Javascript onOctober 13, 2016

先看看效果图：

轻松搞定js表单验证

html:

引入

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/Validate-1.0.1.js"></script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="/Scripts/jquery-1.10.2.js"></script>
  <script src="/Scripts/Validate-1.0.1.js"></script>
  <link href="/Content/system.css" rel="stylesheet" type="text/css" />
  <link href="/Content/metro.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form id="form1" runat="server">
    <div class="form_content">
      <div class="form_center_part">
        <div class="form_view_main">
          <div class="form_part">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_part_t">
              <tbody>
                <tr>
                  <th>长度区间：</th>
                  <td class="graytxt1">
                    <asp:TextBox ID="txtNewPwd" runat="server" class="required length_2_5" />
                  </td>
                </tr>
                <tr>
                  <th>必填</th>
                  <td class="graytxt1">
                    <asp:TextBox ID="txtPwd" runat="server" class="required"/>
                  </td>
                </tr>
                <tr>
                  <th>正整数</th>
                  <td class="graytxt1">
                    <asp:TextBox ID="TextBox1" runat="server" class="integer" />
                  </td>
                </tr>
                <tr>
                  <th>小数</th>
                  <td class="graytxt1">
                    <asp:TextBox ID="TextBox3" runat="server" class="decimal" />
                  </td>
                </tr>
                <tr>
                  <th>手机</th>
                  <td class="graytxt1">
                    <asp:TextBox ID="txtMobile" runat="server" class="required mobile"></asp:TextBox>
                  </td>
                </tr>
                <tr>
                  <th>电话</th>
                  <td class="graytxt1">
                    <asp:TextBox ID="TextBox2" runat="server" class="tel"></asp:TextBox>
                  </td>
                </tr>
                <tr>
                  <th>单选</th>
                  <td class="graytxt1">
                    <asp:RadioButtonList ID="rbtnlCode" runat="server" class="rbtn required" RepeatLayout="Flow" RepeatDirection="Horizontal">
                      <asp:ListItem Value="1">无</asp:ListItem>
                      <asp:ListItem Value="2">A</asp:ListItem>
                      <asp:ListItem Value="3">B</asp:ListItem>
                    </asp:RadioButtonList>
                  </td>
                </tr>
                <tr>
                  <th>多选</th>
                  <td class="graytxt1">
                    <asp:CheckBoxList ID="chklCode" runat="server" class="chk required length_2_4" RepeatLayout="Flow" RepeatDirection="Horizontal">
                      <asp:ListItem Value="1">A</asp:ListItem>
                      <asp:ListItem Value="2">B</asp:ListItem>
                      <asp:ListItem Value="3">C</asp:ListItem>
                      <asp:ListItem Value="4">D</asp:ListItem>
                      <asp:ListItem Value="5">E</asp:ListItem>
                    </asp:CheckBoxList>
                    <br />
                    最少选择2项但不超过4项
                  </td>
                </tr>
                <tr>
                  <th>多选111</th>
                  <td class="graytxt1">
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" class="chk length_2_0" RepeatLayout="Flow" RepeatDirection="Horizontal">
                      <asp:ListItem Value="1">A</asp:ListItem>
                      <asp:ListItem Value="2">B</asp:ListItem>
                      <asp:ListItem Value="3">C</asp:ListItem>
                      <asp:ListItem Value="4">D</asp:ListItem>
                      <asp:ListItem Value="5">E</asp:ListItem>
                    </asp:CheckBoxList>
                    <br />
                    至少选择2项
                  </td>
                </tr>
                <tr>
                  <th>下拉</th>
                  <td class="graytxt1">
                    <asp:DropDownList ID="drpCode" runat="server" class="drp required">
                      <asp:ListItem Value="">请选择</asp:ListItem>
                      <asp:ListItem Value="2">A</asp:ListItem>
                      <asp:ListItem Value="3">B</asp:ListItem>
                    </asp:DropDownList>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="btn_center">
            <asp:Button ID="btnSubmit" runat="server" CssClass="btn_box submit" Text="提交" OnClick="btnSubmit_Click" />
            <asp:Button ID="btnSave" runat="server" CssClass="btn_box save" Text="保存" OnClick="btnSave_Click" />
          </div>
        </div>
      </div>
    </div>
  </form>
</body>
</html>

脚本：Validate-1.0.1.js

/// <reference path="jquery-1.10.2-vsdoc.js" />
/*
  @Name:验证
  @Author:朱翰洲 
  @WeChat/QQ：86128281
  @Version: 1.0.1 Beta
  @Update:2016/10/10
  @Desc: 将会持续更新
  
使用说明：
  1)demo源码为ASP.NET
  2)需要验证的控件加onblur="Check(this)"或onclick="Check(this)"。
  3)Check()，可自定义提示消息，无自定义时读取默认提示，详见该函数内的注释。
  4)页面无其他逻辑验证时，可加入Validate-?.?.?.default.js脚本文件，无需在控件中加入Check(this)。
  5)radio、checkbox和select详见selectClass或Validate()内的注释。
  6)文本、多选有length_?_?区间验证（至少？项）时须与控件ID命名匹配（id^=xx），否则保存时将会跳过该验证，详见SaveValidate()。
  7)若仅需控制MaxLength建议使用MaxLength属性。
  8)常用格式验证（.mobile,.tel,.email）需对应，需要其他验证可扩展。
  9)若有验证格式如手机、电话等格式，将不再验证长度
  10)css文件中的名称不得与该验证中使用的class名称冲突。
  11)所有class可根据使用习惯更改。

class：
  1)required:非空
  2)onerror:标记错误
  3)length_?_?:详见checkLength()内的注释
  4)rbtn:radio
  5)chk:checkbox
  6)drp:select
  7)mobile:手机
  8)tel:电话
  9)email:邮箱

 */


//.rbtn as RadioButtonList
//.chk as CheckBoxList
//.drp as DropDownList
var selectClass = ".rbtn,.chk,.drp";

//获取验证类型class
function getDictTypeClass() {
  var keys = ".";
  $.each(dictType, function (key, val) {
    keys += key + ",.";
  });
  return keys.substring(0, keys.length - 2);
}

var dictType = {
  "mobile": ["手机", /^0?(13[0-9]|15[0-9]|18[0-9]|14[57])[0-9]{8}$/],
  "tel": ["电话", /^0\d{2,3}-?\d{7,8}$/],
  "email": ["邮箱", /^[0-9a-z][0-9a-z\-\_\.]+@([0-9a-z][0-9a-z\-]*\.)+[a-z]{2,}$/i],
  "integer": ["整数", /^[1-9]+[0-9]*]*$/],
  "decimal": ["数字", /^[0-9]+.?[0-9]*$/],
}

$(function () {
  $(".required").each(function () {
    $(this).parent().append("<em>*</em>");//在必填项后添加 * 标记必填，可根据需要修改显示位置
  });
  try {
    //判断是否有Check()
    if (jQuery.isFunction(Check)) {
      $(selectClass).click(function () {
        Check(this);
      });
      $(getDictTypeClass() + ",.required").blur(function () {
        Check(this);
      });
      $("#btnSubmit").click(function () {
        return SubmitValidate();
      })
      $("#btnSave").click(function () {
        return SaveValidate();
      })
    }
  }
  catch (err) {

  }
});

function Check(par, message) {
  var id = getId(par.id);
  if (typeof (message) == "undefined") {
    //未设置message 读取默认提示信息
    message = ($(id).is(selectClass) ? "请选择" : "请输入") + $(id).parent().prev().text().trim().replace('：', '').replace(':', '');
  }
  Validate(id, message);
}

//验证
function Validate(id, message) {
  var isRequired = getIsRequired(id);
  if ($(id).is(selectClass)) {
    $(id).css("background", "none");
    //单选
    if ($(id).hasClass("rbtn")) {
      if (isRequired) {
        if (typeof ($("input:radio[name='" + replaceId(id) + "']:checked").val()) == "undefined") {
          AddError(id, message);
        } else {
          RemoveError(id);
        }
      }
    }
      //多选
    else if ($(id).hasClass("chk")) {
      var options = $("input[name^='" + replaceId(id) + "']:checked").length;//选项（数量）
      var isLength = getIsCheckLength(id);//有选项限制
      if (isLength || isRequired) {
        //必选
        if (isRequired) {
          if (options > 0) {
            //有选择项限制
            if (isLength == true) {
              checkLength(id, options, "");
              //return;
            }
            else {
              RemoveError(id);
            }
          } else {
            AddError(id, message);//未选中
          }
        }
          //非必选，但选择后有选择项限制
        else if (isLength && options > 0) {
          checkLength(id, options, "");
        }
        else {
          RemoveError(id);
        }
      }
    }
      //下拉
    else if ($(id).hasClass("drp")) {
      if (isRequired) {
        if ($(id).val() == "") {
          AddError(id, message);
        } else {
          RemoveError(id);
        }
      }
    }
  }
    //TextBox
  else {
    if ($(id).val().trim() !== "") {
      if (getIsCheckLength(id)) {
        checkLength(id, $(id).val().trim().length, "text");
      }
      else {
        checkFormat(id); //格式验证不再验证长度
      }
    } else {
      if (isRequired) {
        AddError(id, message);
      } else {
        RemoveError(id);
      }
    }
  }
}
//是否必填
function getIsRequired(id) {
  return $(id).hasClass("required");
}
//是否验证长度
function getIsCheckLength(id) {
  if (typeof ($(id).attr('class')) != "undefined") {
    return $(id).attr('class').indexOf('length') != "-1";
  } else {
    return "false";
  }
}
//验证长度 itemLength长度或选项数量。text文本其他值为多选
function checkLength(id, itemLength, text) {
  //$(id).filter(":contains('length')")
  if (getIsCheckLength(id)) {
    var length = getClassName(id, "length");
    var min = length.split('_')[1], max = length.split('_')[2];//取出最小值和最大值
    //min为0时，取max的最大长度
    if (min == 0) {
      var tips = text == "text" ? "最大长度不超过" + max + "位字符" : "需选择" + max + "项";
      if (itemLength > max) {
        AddError(id, tips);
      }
      else {
        RemoveError(id);
      }
    }
      //max为0时，取min的最小长度
    else if (max == 0) {
      if (itemLength < min) {
        AddError(id, text == "text" ? "请输入" + (min - 1) + "位以上字符" : "至少选择" + min + "项");
      }
      else {
        RemoveError(id);
      }
    }
      //min和max大于0时，取区间
    else if (min > 0 && max > 0) {
      var tips = text == "text" ? "请输入" + min + "~" + max + "位的字符" : "需选择" + +min + "~" + max + "项";
      if (itemLength < min) {
        AddError(id, tips);
      }
      else if (itemLength > max) {
        AddError(id, tips);
      }
      else {
        RemoveError(id);
      }
    }
    else {
      RemoveError(id);
    }
  }
}

String.prototype.trim = function () {
  return this.replace(/(^\s*)|(\s*$)/g, '');
};
var error_icon = "<img src=/Images/error_small.png>";
//验证失败，添加onerror
function AddError(id, message) {
  var spId = id.replace("#", "sp");
  $(id).addClass("onerror");
  if ($(id).nextAll("span") == undefined || $(id).nextAll("span").attr("id") !== spId) {
    if ($(id).next().html() === "*") {// 提示信息放在必填验证符号后
      $(id).next().after("<span id='" + spId + "' style='color:red'>" + error_icon + message + "</span>");
    } else {
      $(id).after("<span id='" + spId + "' style='color:red'>" + error_icon + message + "</span>");
    }
  } else {
    $("#" + spId).html(error_icon + message);
  }
}
//验证成功，移除onerror
function RemoveError(id) {
  $(id).removeClass("onerror");
  $(id.replace("#", "#sp")).html("");
}
//删除ID中的#（参数id：#txtId）
function replaceId(id) {
  return id.replace("#", "");
}
//在ID前加上#（参数id：txtId）
function getId(id) {
  return "#" + id;
}
//判断className是否存在,返回className
function getClassName(id, className) {
  var clazzs = $(id).attr('class');// 获取class 字符串
  var classIndex = clazzs.substring(clazzs.indexOf(className));//截取
  if (classIndex != "-1") {
    var last = classIndex.indexOf(" ");//判断后面是否有空格或其他样式
    return (last == -1 ? classIndex : classIndex.substring(0, last));
  }
  return "";
}
//验证格式（验证内容详见dictType）
function checkFormat(id) {
  if ($(id).is(getDictTypeClass()) && $(id).val().trim() != "") {
    var clazz = getDictTypeClass().replace('.', '').split(',');
    for (var i = 0; i < clazz.length; i++) {
      if ($(id).attr('class').indexOf(clazz[i].replace('.', '')) != "-1") {
        var name = clazz[i].replace('.', '');
        if (dictType[name][1].exec($(id).val().trim())) {
          RemoveError(id)
        }
        else {
          AddError(id, dictType[name][0] + "格式错误");
        }
        break;
      }
    }
  }
  else {
    RemoveError(id);
  }
}

//提交时验证
function SubmitValidate() {
  $(".required:input").trigger('blur');
  $(selectClass).trigger('click');
  return $(".onerror").length == 0;
}
//保存时验证
function SaveValidate() {
  $(".onerror").each(function () {
    RemoveError(getId($(this).attr("id")));//移除所有验证的提示
  });
  //查找所有需要验证格式的文本，若非空，验证格式是否正确
  $(getDictTypeClass()).each(function () {
    if ($(this).val().trim() != "") {
      checkFormat(getId($(this).attr("id")));
    }
  });
  //验证区间
  $("form [id^=txt],[id^=chk]").each(function () {
    var id = $(this).attr('id');
    //文本框
    if (id.indexOf("txt") != "-1") {
      if ($(this).val().trim() != "" && getIsCheckLength(getId(id))) {
        checkLength(getId(id), $(this).val().trim().length, "text");
      }
    }
      //多选
    else {
      var options = $("input[name^='" + id + "']:checked").length;
      if (options > 0 && getIsCheckLength(getId(id))) {
        checkLength(getId(id), options, "");
      }
    }
  });
  return $(".onerror").length == 0;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

轻松搞定js表单验证

- Author -

ZhuHanzhou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
js创建对象的方法汇总
Jan 07 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
Seajs是什么及sea.js 由来，特点以及优势
Oct 13 #Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 #Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 #Javascript
JS取模、取商及取整运算方法示例
Oct 13 #Javascript
JavaScript中常用的验证reg
Oct 13 #Javascript
微信小程序 视图层（xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 #Javascript
浅谈jquery上下滑动的注意事项
Oct 13 #Javascript
Pickle(1) 类加载器(1) 解密(1) logging(1) 加密(1) Launch Mode(1) requests(1) hashlib(1) apt命令(1) hmac(1)
You might like
无限级别菜单的实现
2006/10/09 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JavaScript字符串对象split方法入门实例（用于把字符串分割成数组）
2014/10/16 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python表示矩阵的方法分析
2017/05/26 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
CSS3 box-sizing属性
2009/04/17 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
文明礼仪小标兵事迹
2014/01/12 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
推广普通话演讲稿
2014/05/23 职场文书
健康教育评估方案
2014/05/25 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
创新创业项目计划书该怎样写？
2019/08/13 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis