输入框限制与实时验证

新增的操作就是将数据规范的保存到数据库，这些数据可以是从外部导入的，也可以是页面上手动填写的。而这些数据也不是可以随便乱填的，为了尽量避免数据库存入无用数据，我们会对要保存的数据做一些验证，这里要讲的就是从输入框开始的验证和提醒。

下图是一个新增员工信息的新增窗口：

主要验证的就是圈中的三个字段，因为这三个字段在社会中是存在一定使用限制的。

先是在inpu标签中设置输入限制,看下方代码。

1. onkeyup='this.value = this.value.replace(/[^A-Za-z\u4e00-\u9fa5.]/gi, "")'
2. onkeyup='this.value=this.value.replace(/[^\d-]/gi,"")'
3. onkeyup='this.value=this.value.replace(/\D/gi,"")'

1是限制姓名的，不允许输入英文与中文之外的字符，否则替换为空。

2是限制电话号码，不允许输入数字与符号-之外的字符，否则替换为空。

3是将数字之外字符替换为空。

在设置输入限制之后就是实时判断框内文本是否符合标准，不符合就在输入框下方显示一段红字进行提醒。

拿电话号码做例子：//失去焦点事件

            $("#IsPhone").blur(function () {

                var Text = $("#IsPhone").val();

                var cunZai = /^((\d{3,4}-)|(\d{3.4}-))?\d{7,8}$/;

                if (cunZai.test(Text)) {

                    $(".dianhua").addClass("d-none");

                    phone = true;

                }

                else {

                    $(".dianhua").removeClass("d-none");

                    phone = false;

                }

            })

这个功能的实现靠的是输入框失去焦点事件，在输入框焦点失去时获取框内文本，正则验证是否符合基本要求。符合则在红字的标签中加入隐藏类，不符则去除隐藏类。事先我也声明了一个全局变量，符合则赋值为true，不符则赋值为false。在点击保存时不为true就提示框提示。