轻松搞定js表单验证

2019-11-20 08:45:29

字体：大中小

来源：转载

供稿：网友

先看看效果图：

html:

引入

<!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 DropDownListvar selectClass = ".rbtn,.chk,.drp";//获取验证类型classfunction 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>";//验证失败，添加onerrorfunction 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);  }}//验证成功，移除onerrorfunction 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是否存在,返回classNamefunction 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手风琴效果

下一篇：Seajs是什么及sea.js 由来，特点以及优势