简单表单验证纯JS

最新推荐文章于 2022-10-26 08:00:00 发布

nonrk

最新推荐文章于 2022-10-26 08:00:00 发布

阅读量100

点赞数

文章标签： javascript js html

本文链接：https://blog.csdn.net/nonrk/article/details/117257674

版权

本文介绍了一种简单的JavaScript表单验证方法，通过遍历并解析input、select和textarea元素的data-verify属性实现必填、数字、最大长度和数字区间等验证规则。示例代码展示了如何在input标签中添加data-verify属性，并在页面加载后进行验证，错误信息以BR换行显示。支持的验证包括：必填项、数字验证、最大长度和数字区间。

摘要由CSDN通过智能技术生成

最近写后台表单太多需要验证，与时写了一个简单的表单验证JS

//表单验证
function fromVerify() {
    this.verify=function () {
        var object=[];
        var v_data=[];
        var input=document.getElementsByTagName("input");//获取所有input
        var select=document.getElementsByTagName("select");//select
        var textarea=document.getElementsByTagName("textarea");//获取所有textarea
        //查找所有data-verify标签
        for(var i=0; i<input.length; i++) {
            var input_data_set = input[i].dataset.verify;
            if(input_data_set) {
                object.push(input[i].id);
                v_data.push(input[i].dataset.verify);
            }
        }
        for(var j=0; j<select.length; j++) {
            var select_data_set = select[j].dataset.verify;
            if(select_data_set) {
                object.push(select[i].id);
                v_data.push(select[i].dataset.verify);
            }
        }
        for(var k=0; k<textarea.length; k++) {
            var textarea_data_set = textarea[k].dataset.verify;
            if(textarea_data_set) {
                object.push(textarea[i].id);
                v_data.push(textarea[i].dataset.verify);
            }
        }
        var error=[];
        //根据data-verify标签解析验证 req:true:对象名称
        for (let i=0; i<object.length;i++){
            let v=v_data[i].split(':');
            let value=$('#' + object[i]).val();
            if(v[0]=='req') {//必填项
                if (value=='') {
                    error.push([v[2]+':必填']);
                }
            }
            else if(v[0]=='number'){//只能说数字
                let re = /\D/;
                if (re.test(value)) {
                    error.push([v[2]+':只能是数字']);
                }
            }
            else if(v[0]=='max'){//最大长度
                if (value.length>v[1]) {
                    error.push([v[2]+':长度不能大于'+v[1]]);
                }
            }
            else if(v[0]=='between'){//数字区间
                let between=v[1].split(',');
                if (value<=between[0] && value>=between[1]) {
                    error.push([v[2]+':只能是大于'+between[0]+'小于'+between[1]+'的数字']);
                }
            }
        }
        //根据自身需求返回验证结果 这里返回的是br换行的错误信息 只需判断数组是否长度等于0即可验证是否通过
        if(error.length>0){
            error=error.join('<br/>');
        }
        return error;
    }
}

使用方法

在input 等标签添加data-verify="req:true:用户名"

当前支持

req:true:用户名必填

number:true:用户ID 数字

max:12:金额最大长度

between:6,12:账号长度区间

<input id="name" name="name" data-verify="req:true:用户名" >

在页面添加引入JS即可使用

var verify=new fromVerify();//初始化对象
var result=verify.verify();
if(result.length==0){
        //Do it!
     }
     else
        alert(result);//提示错误信息
     }