JS通用表单验证函数

导读:
  Check.js JS函数文件
  
  /*
  *--------------- 客户端表单通用验证CheckForm(oForm) -----------------
  * 功能:通用验证所有的表单元素.
  * 使用:
  *

  *
  *
  *

  * author:wanghr100(灰豆宝宝.net)
  * email:wanghr100@126.com
  * update:19:28 2004-8-23
  * 注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.
  * 已实现功能:
  * 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
  * 待实现功能:把正则表式写成个库.
  *--------------- 客户端表单通用验证CheckForm(oForm) -----------------
  */
  
  //主函数
  function CheckForm(oForm)
  {
  var els = oForm.elements;
  //遍历所有表元素
  for(var i=0;i
  {
  //是否需要验证
  if(els[i].check)
  {
  //取得验证的正则字符串
  var sReg = els[i].check;
  //取得表单的值,用通用取值函数
  var sVal = GetValue(els[i]);
  //字符串->正则表达式,不区分大小写
  var reg = new RegExp(sReg,"i");
  if(!reg.test(sVal))
  {
  //验证不通过,弹出提示warning
  alert(els[i].warning);
  //该表单元素取得焦点,用通用返回函数
  GoBack(els[i])
  return false;
  }
  }
  }
  }
  //通用取值函数分三类进行取值
  //文本输入框,直接取值el.value
  //单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
  //单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
  function GetValue(el)
  {
  //取得表单元素的类型
  var sType = el.type;
  switch(sType)
  {
  case "text":
  case "hidden":
  case "password":
  case "file":
  case "textarea": return el.value;
  case "checkbox":
  case "radio": return GetValueChoose(el);
  case "select-one":
  case "select-multiple": return GetValueSel(el);
  }
  //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
  function GetValueChoose(el)
  {
  var sValue = "";
  //取得第一个元素的name,搜索这个元素组
  var tmpels = document.getElementsByName(el.name);
  for(var i=0;i
  {
  if(tmpels[i].checked)
  {
  sValue += "0";
  }
  }
  return sValue;
  }
  //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
  function GetValueSel(el)
  {
  var sValue = "";
  for(var i=0;i
  {
  //单选下拉框提示选项设置为value=""
  if(el.options[i].selected && el.options[i].value!="")
  {
  sValue += "0";
  }
  }
  return sValue;
  }
  }
  //通用返回函数,验证没通过返回的效果.分三类进行取值
  //文本输入框,光标定位在文本输入框的末尾
  //单多选,第一选项取得焦点
  //单多下拉菜单,取得焦点
  function GoBack(el)
  {
  //取得表单元素的类型
  var sType = el.type;
  switch(sType)
  {
  case "text":
  case "hidden":
  case "password":
  case "file":
  case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();
  case "checkbox":
  case "radio": var els = document.getElementsByName(el.name);els[0].focus();
  case "select-one":
  case "select-multiple":el.focus();
  }
  }
  
  demo.htm 演示文件
  
<script language=JavaScript src="Check.js"
<>  通用表单函数测试:

  


  test: 不验证


  账号: 不能为空


  密码: 六位以上


  电话:


  相片上传:


  出生日期: 日期格式2004-08-10


  省份:

  
  •   

      


      选择你喜欢的运动:


      游泳

      篮球

      足球

      排球

      


      你的学历:

      大学

      中学

      小学

      


      个人介绍:

       20个字以上

      

      


  •   不管是动态网站,还是其它B/S结构的系统,都离不开表单

      表单做为客户端向服务器提交数据的载体担当相当重要的角色.

      这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据

      保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个

      项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数...

      本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.

      个人以为表单的验证应该包含两部分:

      第一,判断用户输入的数据是否合法.

      第二,提示用户你的数据为什么是不合法的.

      所以,我们的通用表单验证函数要实现的功能就是:

      第一,取得用户输入的数据GetValue(el)

      第二,验证用户的数据CheckForm(oForm)

      IE支持自定义属性,这就是这个通用函数实现的基础

      我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.

      check属性:该属性用于存储数据合法性的正则表达式.

      warning属性:该性性用于存储出错误提示信息.

      第三,返回有误的表单提示GoBack(el)

      这三个步骤的触发事件是onsubmit,记住是return CheckForm(this)

      搞错了就全功尽弃了 :)

      


      写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.

      我们要做的就是写好正则表达式!

      接下来我们来分析一下所有的表单元素

      按其共性,我们将它们分为三类

      每类表单的特点不一样,我们的目标就是写出通用的.

      1.文输入框Text

      

      

      

      

      

      2.单多选框Choose

      

      

      

      

      3.单多下拉菜单Select

      

      

      讲了一堆"大道理"太抽象了,代码更有说服力!

      附:

      Microsoft Windows脚本技术,这里有正则表达式的介绍

      http://www.dqcn.net/net/CSDN/Book/SCRIPT56.chm

      一个很不错的正则表达式网站,里面收集了很多的正则表达式.直接拿来主义吧.

      http://www.regexlib.com/Default.aspx

      原作者已做了大量的基础工作,提供了js文件下载(真是好人!),只是有几点不足之处:

      1、 页面的验证check,只能输入实际的正则表达式。而正则表达式不是一件容易记 忆的东东。

      2、 有些验证的规则,是单纯的正则表达式所不能搞定的,需要引入普通的验证function。

      3、 对输入项,有时一个验证规则难以满足需要,需要多个规则叠加。

      4、 warning太繁,显得罗嗦。

      5、 只适用检查整个form的所有属性验证,未提供针对某一个属性进行验证。

      6、 没有“是否必填”的属性。

      

      针对以上,做了如下改进:

      1、 在JS文件中就某些通用规则设定公共验证函数(提供的验证规则函数在后文中列出),在表单中只需给check设定相应的验证类型,通过使用eval()动态执行函数。

      2、 在JS文件中规则函数的设定,有两种方式,说明如下:

      a、 正则表达式的验证方式,返回数组rt,rt[0]为对应的正则表达式,rt[1]为对应要警告的语句.

      b、 普通的判断function,返回false或true,函数体中通过this.value和this.showName获取页面数据,自行判定value的合法性.

      3、 可给check设置多个规则,各个规则之间使用";"隔开,如"不能含有空格,且字数不能超过10",设置"notBlank;isString('#',10)".

      4、 页面中,简单设置showName属性值即可。

      5、 提供checkElement(id,func)函数,检查某个元素是否匹配。

      6、 提供“required”的属性设置。

      

      

      

      IE(别的浏览器呢?)支持自定义属性,设定required/showName/check三个属性,当设定这些属性,对象必需有对应的name属性:

      属性名 是否必填 说明

      required 否 “true” 或者“ yes ”为必填写

      showName 否 要显示的对象描述

      建议设置,方便对用户提示

      check 否 验证的规则函数设定:

      1、对于不带参数的规则,可直接设置规则名,如notBlank或者notBlank().

      2、对于带参数的规则,需要设置对应的规则参数,如isDate('YYYY-MM-DD').

      3、对于本JS文件未提供的类型判定,可自行设置正则表达式验证,如验证三到五位的字符,设置reg('^//S{3,5}$') .

      4、可给check设置多个规则,各个规则之间使用";"隔开,如"不能含有空格,且字数不能超过10",设置"notBlank;isString('#',10)".

      

      JS文件的函数说明如下:

      一、工具function

      函数 输入参数 返回值 说明

      CheckForm oForm : 页面 FORM boolean form 验证的主函数

      validate ele : form 中某个元素

      boolean CheckForm 的辅助函数,不要直接调用

      GetValue ele : form 中某个元素

      string 通用的获取某个 element 的值

      GoBack ele : form 中某个元素

      void 焦点定位

      executeFunc name : 函数名 字符串

      string 使用 eval() 动态执行函数

      trim value string 使用正则表达式,去除首尾空格

      regValidate value : 要验证值

      sReg:正则表达式

      boolean 判定某个值与正则表达式是否相符

      checkValue value :要验证值

      func:规则函数

      boolean 判定某个数值与某个验证函数是否相符

      验证函数的写法同上文check属性

      checkElement id : 元素的 ID

      func:规则函数

      showName:要alert的显示名,如不设,不alert

      boolean 检查某个元素与某个验证函数是否相符 , 需要传入元素的 ID

      checkSelectByName name : 元素 name

      num:至少选择的个数

      showName:要alert的显示名,如不设,不alert

      boolean 检查某个对象 (checkbox/select-multiple) 至少选择个数 , 需要传入元素的 NAME

      elementValue id :元素 ID string 获取某元素的值

      log v :调试信息 void 一个 javascript 调试工具 : log4js

      调用log函数后,按F1就能看到效果了

      (呵呵,这个是从网上看到的,不记得出处了,象原作者表示感谢)

      

      二、规则验证函数

      函数有两大类,一类是正则表达式(A),一类是普通的javascript验证函数(B)。

      给出了一些常用的规则函数验证,需要根据实际不断增加.

      函数 类型 输入参数 返回值 说明

      reg A sReg 正则表达式字符串

      数组 rt , rt[0] 为对应的正则表达式, rt[1] 为对应要警告的语句

      

      A类的返回值

      

      匹配自行定义的正则表达式

      

      

      notBlank A 不能为空 , 且不能含有空格

      required A 必需填写,不能为空

      isDate A fmt 格式

      yyyy-mm-dd

      yyyy/mm/dd

      yyyy.mm.dd

      yyyymmdd

      日期格式判断

      只使用正则表达式匹配格式

      待完善:月份和日期是否合理

      isString A min 个数最小值

      max 个数最大值

      

      ‘#’ 表示任意

      字符串判定

      有如下几种设定方式:

      isString 任意字符串

      isString(‘#’, ‘#’) 任意字符串

      isString(4) 4位字符串

      isString(4,8) 4到8位字符

      isString(‘#’,4) 最多4位字符

      isString(4, ‘#’) 最少4位字符

      strStartsWith B str 开头的字符 如否,返回 false

      否则,返回true或者void

      

      B类的返回值

      字符串是否以“ str ”开头

      isContains B str 包含的字符 字符串是否包含“ str ”

      strEndsWith B str 结束的字符 字符串是否以“ str ”结束

      isEmail A 是否 E-AMIL

      onlyZh A 只包含中文

      onlyEn A 只包含英文

      enOrNum A 只包含英文和数字

      isInt A type 整数的类型

      为空任意整数

      '0+' 非负整数

      '+' 正整数

      '-0' 非正整数

      '-' 负整数

      整数的判定

      如isInt(‘0+’),只能是非负整数

      isFloat A type 浮点数的类型

      为空任意浮点数

      '0+' 非负浮点数

      '+' 正浮点数

      '-0' 非正浮点数

      '-' 负浮点数

      浮点数的判定

      如isFloat(‘0+’),只能是非负浮点数

      setNumber B min 最小值

      max最大值

      ‘#’ 表示任意

      数字大小判定

      有如下几种设定方式:

      setNumber 任意数字

      setNumber(‘#’, ‘#’) 任意数字

      setNumber(4) 必需是4

      setNumber(4,8) 4到8之间

      setNumber(‘#’,4) 不大于4

      setNumber(4, ‘#’) 不小于4

      isPhone A 电话号码判定

      isMobile A 手机号码判定

      isUrl A URL 判定

      必须以http(s)://开头

      isZip A 邮政编码

      select A num 必需选择的最少个数

      目标是否要选择

      用于select-multiple/checkbox

      。。。。。TODO 自行根据业务需要添加

      

       如何使用呢 ?

      前提是引入Check.js文件:
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值