JS表单验证类HTML代码实例

以前用的比较多的一个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代码实例的更多相关文章

js 表单验证控制代码大全
js表单验证控制代码大全关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
php常用表单验证类用法实例
<?php /** * 页面作用:常用表单验证类 * 作者:欣然随风 * QQ:276624915 */ class class_post { //验证是否为指定长度的字母/数字组合 func ...
Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
jquery.validation.js 表单验证
jquery.validation.js 表单验证官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
一个PHP常用表单验证类(基于正则)
一个基于正则表达式的PHP常用表单验证类,作者:欣然随风.这个表单判断类的功能有:验证是否为指定长度的字母/数字组合.验证是否为指定长度汉字.身份证号码验证.是否是指定长度的数字.验证邮件地址.电话 ...
Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
一个漂亮的js表单验证页面+验证码
一个漂亮的js表单验证页面见图知其意, 主要特性带密码安全系数的判断其他的就没有啥啦嘿嘿嘿当然,其代码也在Github上我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代 ...

随机推荐

BZOJ1674: [Usaco2005]Part Acquisition
1674: [Usaco2005]Part Acquisition Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 259 Solved: 114[Sub ...
Android新浪微博客户端（七）——ListView中的图片异步加载、缓存
原文出自:方杰|http://fangjie.info/?p=193转载请注明出处最终效果演示:http://fangjie.sinaapp.com/?page_id=54 该项目代码已经放到git ...
libvirt 基于C API基本使用案例
玩开源分享,需要有干到底的精神,今晚随便逛逛技术论坛突发有感;Ruiy不足之处,需跟进了; 最近变的较懒了,干活有点没劲,也不怪干来干去收获不大,缺少鼓励! 现在玩的技术大多是上不了台面了,想过没,你 ...
hyperv虚拟机网络速度慢问题的解决办法
服务器安装了windows2012R2进行虚拟化,虚拟机也是用的是windows2012R2的操作系统,这样可以一次激活对应的虚拟机. 在使用虚拟机的过程中发现问题,虚拟机主机的网速正常,无论是ftp ...
【转】在Eclipse环境下配置Servlet开发环境
配置这个真心坑···浪费我一下午时间,而且去网上找了一圈资料发现都不靠谱呀= = 于是自己写一个,防止忘记了一.配置前准备你需要下载三个东西 Eclipse J2EE:http://www.ecl ...
WORLD OPERATS
word文章设置无法复制通常我们会采用设置密码的方式,规定某个文档的使用范围. 但这种方法是有一个局限,那就是可以观看文档的人未必靠谱,万一复制了文档的重要内容怎么办? 因此,不妨考虑加上禁 ...
TeamViewer或者向日葵等无法成功远程登录
之前一直能正常远程的两台电脑,今天不知道什么原因,莫名其妙的就无法登录了. 更悲催的时,今天早上走的时候,忘把TeamViewer或者向日葵软件启动了. 还好,我登录向日葵官网,在管理中心设置里面开启 ...
集群中几种session同步解决方案的比较
1. 客户端cookie加密 .比较好的方法是自己采用cookie机制来实现一个session,在应用中使用此session实现. 问题:session中数据不能太多,最好只有个用户id. Sessi ...
Android自定义属性、控件三步法
第二步中layout-activity_main.xml 中自命名控件: xmlns:android="http://schemas.android.com/apk/res/android& ...
JAVA - Comparable接口与 Comparator接口
Similarities:Both are custom ways to compare two objects.Both return an int describing the relatio ...

JS表单验证类HTML代码实例

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

随机推荐

热门专题