JS表单验证类HTML代码实例

时间：2023-02-15 22:18:46

以前用的比较多的一个JS表单验证类，对于个人来说已经够用了，有兴趣的可以在此基础上扩展成ajax版本。本表单验证类囊括了密码验证、英文4~10个 字符验证、 中文非空验证、大于10小于100的数字、浮点数验证、日期验证、邮件检查、网址验证、固定电话和手机号码验证、IP地址验证、邮编和QQ号码验证、 MSN和身份证验证等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>番茄表单验证类HTML代码示例</title>

<script language="javascript" type="text/javascript">

//去除字符串两边空格

String.prototype.trim = function () {

    return this.replace(/(^\s+)|(\s+$)/g, "");

}

//检测字符串是否为空

String.prototype.isEmpty = function () {

    return !(/.?[^\s　]+/.test(this));

}

//检测值是否介于两个指定值之间

String.prototype.isBetween = function (val, min, max) {

    return isNaN(val) == false && val >= min && val <= max;

}

//获取最大值或最小值

String.prototype.getBetweenVal = function (what) {

    var val = this.split(',');

    var min = val[0];

    var max = val[1] == null ? val[0] : val[1];

    if (parseInt(min) > parseInt(max)) {

        min = max;

        max = val[0];

    }

    return what == 'min' ? (isNaN(min) ? null : min) : (isNaN(max) ? null : max);

}

var validator = function (formObj) {

    this.allTags = formObj.getElementsByTagName('*');

    //正则表达式验证字符串

    this.reg = new Object();

    this.reg.english = /^[a-zA-Z0-9_\-]+$/;

    this.reg.chinese = /^[\u0391-\uFFE5]+$/;

    this.reg.number = /^[-\+]?\d+(\.\d+)?$/;

    this.reg.integer = /^[-\+]?\d+$/;

    this.reg.float = /^[-\+]?\d+(\.\d+)?$/;

    this.reg.date = /^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/;

    this.reg.email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    this.reg.url = /^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;

    this.reg.phone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;

    this.reg.mobile = /^((\(\d{2,3}\))|(\d{3}\-))?((13\d{9})|(159\d{8}))$/;

    this.reg.ip = /^(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5])$/;

    this.reg.zipcode = /^[1-9]\d{5}$/;

    this.reg.qq = /^[1-9]\d{4,10}$/;

    this.reg.msn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    this.reg.idcard = /(^\d{15}$)|(^\d{17}[0-9Xx]$)/;

    //输出错误信息

    this.tip = new Object();

    this.tip.unknow = '未找到类型，无法验证。';

    this.tip.paramError = '参数设置错误，无法验证。';

    this.tip.required = '不允许为空。';

    this.tip.english = '仅允许英文字符及下划线 (a-zA-Z0-9_)。';

    this.tip.chinese = '仅允许中文字符。';

    this.tip.number = '不是一个有效数字。';

    this.tip.integer = '不是一个有效整数。';

    this.tip.float = '不是一个有效的浮点数。';

    this.tip.date = '不是一个有效的日期格式。 (例如：2007-06-29)';

    this.tip.email = '不是一个有效的电子邮件格式。';

    this.tip.url = '不是一个有效的超链接格式。';

    this.tip.phone = '不是一个有效的电话号码。';

    this.tip.mobile = '不是一个有效的手机号码。';

    this.tip.ip = '不是一个有效的IP地址。';

    this.tip.zipcode = '不是一个有效的邮政编码。';

    this.tip.qq = '不是一个有效的QQ号码。';

    this.tip.msn = '不是一个有效的MSN帐户。';

    this.tip.idcard = '不是一个有效的身份证号码。';

    //获取控件名称

    this.getControlName = function ()

    {

        return this.element.getAttribute('controlName') == null

               ? '指定控件的值'

               : this.element.getAttribute('controlName');

    }

    //设定焦点

    this.setFocus = function (ele) {

        try {

            ele.focus();

        } catch (e){}

    }

    //设置边框颜色

    this.setBorderColor = function (ele) {

        var borderColor = ele.currentStyle ?

                          ele.currentStyle.borderColor :

                          document.defaultView.getComputedStyle(ele, null)['borderColor'];

        ele.style.borderColor = '#ff9900';

        ele.onkeyup = function () {

            this.style.borderColor = borderColor;

        }

    }

    //输出错误反馈信息

    this.feedback = function (type) {

        try {

            var msg = eval('this.tip.' + type) == undefined ?

                      type :

                      this.getControlName() + eval('this.tip.' + type);

        } catch (e) {

            msg = type;

        }

        this.setBorderColor(this.element);

        alert(msg);

        this.setFocus(this.element);

    };

    //执行字符串验证

    this.validate = function () {

        var v = this.element.value;

        //验证是否允许非空

        var required = this.element.getAttribute('required');

        if (required != null && v.isEmpty()) {

            this.feedback('required');

            return false;

        }

        //验证是否合法格式

        var dataType = this.element.getAttribute('dataType');

        if (!v.isEmpty() && dataType != null &&  dataType.toLowerCase() != 'password') {

            dataType = dataType.toLowerCase();

            try {

                if (!(eval('this.reg.' + dataType)).test(v)) {

                    this.feedback(dataType);

                    return false;

                }

            } catch(e) {

                this.feedback('unknow');

                return false;

            }

        }

        //执行数据验证

        var confirm = this.element.getAttribute('confirm');

        if (confirm != null) {

            try {

                var data = eval('formObj.' + confirm + '.value');

                if (v != data) {

                    alert('两次输入的内容不一致，请重新输入。');

                    this.setBorderColor(this.element);

                    this.setFocus(this.element);

                    return false;

                }

            } catch (e) {

                this.feedback('paramError');

                return false;

            }

        }

        //验证数字大小

        var dataBetween = this.element.getAttribute('dataBetween');

        if (!v.isEmpty() && dataBetween != null) {

            var min = dataBetween.getBetweenVal('min');

            var max = dataBetween.getBetweenVal('max');

            if (min == null || max == null) {

                this.feedback('paramError');

                return false;

            }

            if (!v.isBetween(v.trim(), min, max)) {

                this.feedback(this.getControlName() + '必须是介于 ' + min + '-' + max + ' 之间的数字。');

                return false;

            }

        }

        //验证字符长度

        var dataLength = this.element.getAttribute('dataLength');

        if (!v.isEmpty() && dataLength != null) {

            var min = dataLength.getBetweenVal('min');

            var max = dataLength.getBetweenVal('max');

            if (min == null || max == null) {

                this.feedback('paramError');

                return false;

            }

            if (!v.isBetween(v.trim().length, min, max)) {

                this.feedback(this.getControlName() + '必须是 ' + min + '-' + max + ' 个字符。');

                return false;

            }

        }

        return true;

    };

    //执行初始化操作

    this.init = function () {

        for (var i=0; i<this.allTags.length; i++) {

            if (this.allTags[i].tagName.toUpperCase() == 'INPUT' ||

                this.allTags[i].tagName.toUpperCase() == 'SELECT' ||

                this.allTags[i].tagName.toUpperCase() == 'TEXTAREA')

            {

                this.element = allTags[i];

                if (!this.validate())

                    return false;

            }

        }

    };

    return this.init();

}

</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="" onsubmit="return validator(this);">

  <table width="600" border="0" cellspacing="0" cellpadding="2" style="font:12px Tahoma">

    <tr>

      <td>密码</td>

      <td>password</td>

      <td><input type="text" name="password" controlName="密码" dataType="password" /></td>

    </tr>

    <tr>

      <td>密码确认</td>

      <td>confirm</td>

      <td><input type="text" name="confirm" controlName="密码确认" confirm="password" /></td>

    </tr>

    <tr>

      <td width="57">英文</td>

      <td width="60">english</td>

      <td width="471"><input type="text" name="english" controlName="英文" dataType="english" dataLength="4,10" />

      4~10个字符</td>

    </tr>

    <tr>

      <td>中文</td>

      <td>chinese</td>

      <td><input type="text" name="chinese" required="required" controlName="中文" />

非空</td>

    </tr>

    <tr>

      <td>数字</td>

      <td>number</td>

      <td><input type="text" name="number" controlName="数字" dataBetween="10,100" />

      大于10，小于100</td>

    </tr>

    <tr>

      <td>整数</td>

      <td>integer</td>

      <td><input type="text" name="integer" controlName="整数" dataType="integer" /></td>

    </tr>

    <tr>

      <td>浮点数</td>

      <td>float</td>

      <td><input type="text" name="float" controlName="浮点数" dataType="float" /></td>

    </tr>

    <tr>

      <td>日期</td>

      <td>date</td>

      <td><input type="text" name="date" controlName="日期" dataType="date" /></td>

    </tr>

    <tr>

      <td>邮件</td>

      <td>email</td>

      <td><input type="text" name="email" controlName="邮件" dataType="email" /></td>

    </tr>

    <tr>

      <td>网址</td>

      <td>url</td>

      <td><input type="text" name="url" controlName="网址" dataType="url" /></td>

    </tr>

    <tr>

      <td>电话</td>

      <td>phone</td>

      <td><input type="text" name="phone" controlName="电话" dataType="phone" /></td>

    </tr>

    <tr>

      <td>手机</td>

      <td>mobile</td>

      <td><input type="text" name="mobile" controlName="手机" dataType="mobile" /></td>

    </tr>

    <tr>

      <td>IP地址</td>

      <td>ip</td>

      <td><input type="text" name="ip" controlName="IP地址" dataType="ip" /></td>

    </tr>

    <tr>

      <td>邮编</td>

      <td>zipcode</td>

      <td><input type="text" name="zipcode" controlName="邮编" dataType="zipcode" /></td>

    </tr>

    <tr>

      <td>QQ号码</td>

      <td>qq</td>

      <td><input type="text" name="qq" controlName="QQ号码" dataType="ip" /></td>

    </tr>

    <tr>

      <td>MSN</td>

      <td>msn</td>

      <td><input type="text" name="msn" controlName="MSN" dataType="msn" /></td>

    </tr>

    <tr>

      <td>身份证</td>

      <td>idcard</td>

      <td><input type="text" name="idcard" controlName="身份证" dataType="idcard" /></td>

    </tr>

    <tr>

      <td colspan="3" align="left"><input type="submit" name="Submit" value=" 提交 " /></td>

    </tr>

  </table>

</form>

</body>

</html>

JS表单验证类HTML代码实例的更多相关文章

  1. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  2. php常用表单验证类用法实例

    <?php /** * 页面作用:常用表单验证类 * 作 者:欣然随风 * QQ:276624915 */ class class_post { //验证是否为指定长度的字母/数字组合 func ...

  3. Jquery&period;validate&period;js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. jquery&period;validation&period;js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  5. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  6. 一个PHP常用表单验证类&lpar;基于正则&rpar;

    一个基于正则表达式的PHP常用表单验证类,作者:欣然随风.这个表单判断类的功能有:验证是否为指定长度的字母/数字组合.验证是否为指定长度汉字.身 份证号码验证.是否是指定长度的数字.验证邮件地址.电话 ...

  7. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  8. jQuery&period;validate&period;js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  9. 一个漂亮的js表单验证页面&plus;验证码

    一个漂亮的js表单验证页面 见图知其意, 主要特性 带密码安全系数的判断 其他的就没有啥啦 嘿嘿嘿 当然,其代码也在Github上 我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代 ...

随机推荐

  1. 在Visual Studio Code中配置GO开发环境

    一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github ...

  2. Visual Studio CLR Profiler

    http://blogs.msdn.com/b/dotnet/archive/2013/04/04/net-memory-allocation-profiling-with-visual-studio ...

  3. java数组的增删改查

    import java.util.List; import java.util.ArrayList; import java.util.Set; import java.util.HashSet; p ...

  4. C 二叉树

    二叉树表示法 P127页 /* typedef struct BiTNode { int data; struct BiTNode *lchild, *rchild; }BiTNode, *BiTre ...

  5. StringEscapeUtils的使用

    使用commons-lang.jar import org.apache.commons.lang.StringEscapeUtils; public class T { public static ...

  6. 使用Visual Studio 创建可视Web Part部件

    使用Visual Studio 创建可视Web Part部件 可视Web Part部件是很强大的Web 部件.它提供内置设计器创建你的用户界面. 本文主要解说怎样使用Visual Studio 创建可 ...

  7. Linux各种版本

     1.1   Fedora Core和Fedora 一开始总搞不清楚 Fedora Core和Fedora有什么关系?有什么不同,现在终于明白了,自从Fedora Core 第七版开始以后就开始称作F ...

  8. Node的安装和进程管理

    安装nvm git clone https://github.com/creationix/nvm.git source nvm/nvm.sh 安装node nvm install 6.14.4(版本 ...

  9. hibernate易混淆点

    萌新小笔记: 用过hibernate的小伙伴肯定经常看到这几个东西吧!但是初学者常常会把这几个搞不清楚:dataSource,session,sessionFactory(dataSource),hi ...

  10. python运算符优先级

    下面这个表给出Python的运算符优先级,从最低的优先级(最松散地结合)到最高的优先级(最紧密地结合).这意味着在一个表达式中,Python会首先计算表中较下面的运算符,然后在计算列在表上部的运算符. ...

相关文章