您的位置：首页 > Web前端 > JavaScript

JavaScript简单通用表单验证工具

2006-11-05 16:42 429 查看
 
找到过很多表单验证的JavaScript工具类，但都感觉用起来不是很爽，知道了prototype.js并简单看了其源码之后，就想自己写一个能满足自己的需求的javascript表单验证工具。
支持功能如下：
1、可以根据设定条件去做校验，只有满足某些条件的情况下才做验证
2、组合条件校验
3、不能为空
4、只能为字母
5、只能为数字
6、只能为字母或数字
7、只能为字母、数字、下划线
8、为整数，即第一位不能为0，其他位必须为数字
9、email地址
10、ip地址，必须为 xxx.xxx.xxx.xxx的形式，每部分不能超过255
11、固定长度的字符串
12、一定长度范围内的字符串
13、一定范围内的整数

使用方式：

<head>
    <!-- 用到prototype.js -->
    <script type="text/javascript" src="js/prototype-1.4.0.js"></script>
    <script type="text/javascript" src="js/adrop.js"></script>
</head>

<script type="text/javascript">
    document.form1.onsubmit = function(){

            // 用form名称作为参数声明类 Validator,
            var validator = new adrop.Validator('form1');
           
            // addValidation方法，至少有三个参数，表单元素名字、校验表达式(我定义的格式)、错误提示信息
            // addValidation(formElementName,expr,errorInfo[,condition1,condition2...])
            // 第三个参数之后的为可选参数，作为校验条件，可以是一个js表达式字符串或者不带参数的function指针，如果是是字符串则计算 eval(string)的值，如果是
            // 函数，则计算function()的值，当所有条件都满足的情况下才去对 formElementName做校验。
            // 用途：根据下拉框选择要隐藏某些表单域，做验证时就可以这么写: validator.addValidation('id','required','不能为空','select.value=="1"');
            // 表示当下拉框select的选中值为1时，才去对name='id'的表单元素做校验。

            validator.addValidation('id','required','不能为空');
            validator.addValidation('id1','alpha','请输入字母');
            validator.addValidation('id2','numeric','请输入数字');
            validator.addValidation('id3','alphanumeric','请输入字母或数字');
            validator.addValidation('id4','word','请输入字母或数字或下划线');
            validator.addValidation('id5','integer','请输入整数');
            validator.addValidation('id6','mail','请输入email');
            validator.addValidation('id7','ipaddr','请输入IP地址');
       
            validator.addValidation('id8','len=8','请输入长度为8的字符串');
            validator.addValidation('id9','minlen=5;maxlen=12','请输入长度为5-12的字符串');
       
            validator.addValidation('id10','gt=2;lt=56','请输入大于2小于56的整数');
       
            return validator.validateAll();
        };   
       
     </script>

校验表达式语法：
1、为字符串
2、可以组合，每个之间用;分割
3、每种校验表达式说明(|表示两种写法都可以)：
    required|req：不能为空
    alpha：大小写字母
    numeric|num：数字
    alnum|alphanumeric：数字字母
    word：字母或数字或下划线
    integer|int：整数，0不能开头
    ipaddr|ip：ip地址
    mail：mail地址
    length|len：固定长度的串，'len=5'
    lessthan|lt：小于值的整数，'lt=4'，即小于等于4的整数
    greaterthan|gt：大于值的整数，'gt=2'，大于等于2的整数，这两者组合可以表示整数的范围：'lt=2;gt=6'，表示2-6之间的整数
    maxlen：最大长度，'maxlen=10'
    minlen：最小长度，'minlen=5'，组合可以表示一定长度范围内的字符串

例子源码：

<html>
<head>
        <script type="text/javascript" src="js/prototype-1.4.0.js"></script>
    <script type="text/javascript" src="js/adrop.js"></script>

</head>

<body>
    <form name="form1" action="" method="post">
   
    非空：<input type="text" name="id" value=""/> <br>
    字母：<input type="text" name="id1" value=""/> <br>
    数字：<input type="text" name="id2" value=""/> <br>
    字母数字：<input type="text" name="id3" value=""/> <br>
    字母数字下划线：<input type="text" name="id4" value=""/> <br>
    整数：<input type="text" name="id5" value=""/> <br>
    email地址：<input type="text" name="id6" value=""/> <br>
    ip地址：<input type="text" name="id7" value=""/> <br>
    长度为8的字符串：<input type="text" name="id8" value=""/> <br>
    长度为5-12的字符串：<input type="text" name="id9" value=""/> <br>
    大于2小于56的整数：<input type="text" name="id10" value=""/> <br>
   
    <input type="submit" /><input type="reset" />
</form>
 <script type="text/javascript">
    document.form1.onsubmit = function(){
            var validator = new adrop.Validator('form1');
            /*
        validator.addValidation('id','required','不能为空');
        validator.addValidation('id1','alpha','请输入字母');
        validator.addValidation('id2','numeric','请输入数字');
        validator.addValidation('id3','alphanumeric','请输入字母或数字');
        validator.addValidation('id4','word','请输入字母或数字或下划线');
        validator.addValidation('id5','integer','请输入整数');
        validator.addValidation('id6','mail','请输入email');
        validator.addValidation('id7','ipaddr','请输入IP地址');
       
        validator.addValidation('id8','len=8','请输入长度为8的字符串');
        validator.addValidation('id9','minlen=5;maxlen=12','请输入长度为5-12的字符串');
        */
        validator.addValidation('id10','gt=2;lt=56','请输入大于2小于56的整数');
       
        return validator.validateAll();
        };   
       
     </script>
</body>
</html>

有人感兴趣，留下邮箱我发javascript源码。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript input integer function email 工具
相关文章推荐
新的分享
章节导航