html 根据配置项统一检查文本框数据规范

    <div>
        中文名:<input id="txtName" type="text" /><br />
        身份证号:<input id="txtPersonID" type="text" /><br />
        <input type="button" value="测试" onclick="chk();" />
    </div>
    <script type="text/javascript">
        //input text文本录入框数据统一检查
        //items:检查配置项,传入对象数组
        //配置项键说明:ID:录入控件ID; ColumnName:录入内容字段名,MustInput:是否必填,Check:检查方式[1:如果是值格式固定的检查用正则表达式,这里传入正则表达式的字符串 2:其它特殊值格式检查,可以自定义检查函数,这里传入检查函数(参数为文本框的值,返回值bool类型)],CheckErrInfo:检查失败提示信息
        function checkInput(items) {
            var info = "";
            //检查参数类型
            if (typeof items == "object" && typeof items.length == "number") {
                for (var i = 0; i < items.length; i++) {
                    if (typeof items[i].ID != ‘string‘ || typeof items[i].ColumnName != ‘string‘ || typeof items[i].MustInput != ‘boolean‘ || (typeof items[i].Check != ‘string‘ && typeof items[i].Check != ‘function‘) || typeof items[i].CheckErrInfo != ‘string‘) continue;

                    //取值
                    var value = document.getElementById(items[i].ID).value;
                    //必填项检查
                    if (items[i].MustInput == true) {
                        if (value == ‘‘) {
                            info += items[i].ColumnName + "必填;";
                        }
                    }
                    else {
                        continue; //不是文本框,
                    }
                    //检查数据规范
                    if (value != ‘‘) {
                        if (typeof items[i].Check == ‘string‘) {
                            if (!regValid(items[i].Check, value)) {
                                info += items[i].ColumnName + items[i].CheckErrInfo + ";";
                            }
                        }
                        else if (typeof items[i].Check == ‘function‘) {
                            if (!items[i].Check(value)) {
                                info += items[i].ColumnName + items[i].CheckErrInfo + ";";
                            }
                        }
                    }
                }
            }
            return info;
        }

        function regValid(regStr, value) {
            var rtn = false;
            if (typeof regStr == "string" && regStr != ‘‘ && typeof value == ‘string‘) {
                var re = new RegExp(regStr);
                rtn = re.test(value);
            }
            return rtn;
        }

        //测试
        function chk() {
            var chkItems = new Array();
            //正则表达式检查中文名称
            chkItems.push({ "ID": "txtName", "ColumnName": "名称", "Check": "^[\u4E00-\u9FA5\uF900-\uFA2D]{2,4}$", "MustInput": true, "CheckErrInfo": "只能2-4位汉字" });
            //也可以自定义函数检查,这里用chkPersonId
            chkItems.push({ "ID": "txtPersonID", "ColumnName": "身份证号", "Check": chkPersonId, "MustInput": true, "CheckErrInfo": "只能17位数字+1位数字或字母" });
            var msg = checkInput(chkItems);
            if (msg != ‘‘) alert(msg);
        }

        //自定义检查函数
        function chkPersonId(personId) {
            return regValid("^[0-9]{17}[0-9a-zA-Z]{1}$", personId);
        }

    </script>
时间: 2024-12-12 19:08:44

html 根据配置项统一检查文本框数据规范的相关文章

文本框数据验证

对于文本框数据,小数点.整数位数等的验证,整理~ function amount(inputText,nm,mm){//输入时函数 var thisVal=inputText.value; var spanTxt=$(inputText).parents(".pop-upBox").find("span"); function xLength(){ if(!isNaN(thisVal)){ var dot = thisVal.indexOf("."

名称案例-使用keyup事件实现1 和 名称案例-使用watch监听文本框数据的变化2

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body><div id="app"> <in

js获取div中的文本框数据

通过div得到div里的所有数据 大神的世界无需解释,当然不是说我,当我看到这些代码的时候我惊呆了! 这是一个工具方法js: js: /* * 获取指定对象下的所有input.textarea值 * divid:外层的id * jsonStr:如果无,新创建一个对象,如果有,直接在对象中添加 * isCheck:是否进行必填项判断 */ getFormParam: function(divid,jsonStr,isCheck){ var inputlist = $("#"+divid+

js实现text文本框的数据实时刷新到另一个text文本框

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>demo01</title></head><body> <form> <h1>text文本框数据同步刷新</h1> <input type="text" onpropertychange="cop()&qu

ajax实例及实现文本框异步搜素

search.jsp(WebContent/jsp/search.jsp) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w

PrimeFace JSF中使用ajax控件无法实时更新文本框inputTextarea内容

PrimeFace+JSF实际工作需要点击一个树将关联的文本添加到inputTextarea文本框,inputTextarea允许用户随意更改,ajax绑定树的select事件,但点击时,后台Bean对象无法实时获取前台文本框改变的实际内容. 原因估计ajax控件无法将前台文本框数据关联到后台. 解决方案: 添加一个按钮和文本框鼠标事件,事件JS调用按钮click事件,由按钮将文件夹数据同步到后台. 前台代码: <script> function callButton(){ document.

[布局]记录部件字段富文本框如何设置统一高度

在使用快速开发平台构建业务功能中,往往都会用到记录部件,如何布局各个字段位置使用户一目了然,往往就是我们头大的问题.在一个固定大小的窗体下,各个字段的样式都是系统自动默认的,如下图: 此种布局方式真是惨不忍睹,那么如何布局多个富文本字段的位置才能使界面简单明了呢?今天为大家带来记录部件中富文本框(数据表中字段编辑类型word)的布局方法:首先在 空白区域鼠标右键唤出菜单[定制版面],单击进入[记录部件布局定制]模式: 选中富文本字段,鼠标右键点击[创建群组]: 群组创建完成,在顶部空白区域右键唤

easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text

完整版文本框即时输入数据监听并下拉显示匹配数据

1.前言 好多小童鞋,对以jq为主的前端并不是特别熟悉,但并不代表你是菜鸟,说不定你是其他方面的资深老司机,好吧,我才是菜鸟,今天主要写一个完整的demo来看看怎样文本框+下拉框即时匹配数据. 2.详情 还是那句话,不说太多废话,直接代码来.如果你是新手,可以直接copy成.html格式的文件,本地预览看到效果,如果看不到效果,那说明什么呢? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">