首页
所有分类
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 相关文章推荐
js location.replace与location.reload的区别
Sep 08 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
pytz(1) 内置函数(1) V Rising(1) commit(1) Navicat(1) harbor(1) Tablespace(1) 自定义函数(1) procedure(1) GoFrame(3)
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
javascript函数库-集合框架
2007/04/27 Javascript
js select常用操作控制代码
2010/03/16 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
用Eclipse写python程序
2018/02/10 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python 实现return返回多个值
2019/11/19 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
亚瑟士美国官网：ASICS美国
2017/02/01 全球购物
Java程序员面试90题
2013/10/19 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
银行职业规划书范文
2013/12/28 职场文书
个人校本研修方案
2014/05/26 职场文书
民事授权委托书范文
2014/08/02 职场文书
个人融资协议书
2014/10/02 职场文书
商场收银员岗位职责
2015/04/07 职场文书
党委工作总结2015
2015/04/27 职场文书
实习感想范文
2015/08/10 职场文书
《海上日出》教学反思
2016/02/23 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫