首页
所有分类
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中的数组Array定义与sort方法使用示例
Aug 29 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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
K8s(1) dataBinding(1) RestTemplate(1) HttpClient(1) Quartz(1) Windows Server 2022(3) NTP(1) ip2region(1) Windows Server(4) Hive(5)
You might like
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
vue.js循环radio的实例
2019/11/07 Javascript
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python中私有属性的定义方式
2020/03/05 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
精致的手工皮鞋：Shoe Embassy
2019/11/08 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
项目建议书怎么写
2014/05/15 职场文书
征兵宣传标语
2014/06/20 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
企业务虚会发言材料
2014/10/20 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis
Pygame如何使用精灵和碰撞检测
2021/11/17 Python