轻松搞定js表单验证

琴修为

2023-03-14

本文向大家介绍轻松搞定js表单验证，包括了轻松搞定js表单验证的使用技巧和注意事项，需要的朋友参考一下

先看看效果图：

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 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表单验证

相关阅读

相关文章

相关问答

相关工具

相关文档