Input文本的焦点验证

 开发工具与关键技术：VS、jQuery &正则表达式

作者：#33

撰写时间：撰写时间：2019年07月25日

在页面新增或修改数据时，往往要判断输入的数据是否符合规范，视图中进行判断，下面就是做练习项目时关于input文本框的一些简单验证列子：

当鼠标点击文本框时，获取焦点，焦点离开后进行判断。如下图输入用户名，输入的值有几种可能的情况。1、为空；2、纯数字或字母；3、长度小于6位或大于20位

                                                                

Html代码：span标签是添加警告语用的

​
<div class="form-row align-items-center m-0">

    <div class="col-sm-3 mt-3 my-1">

        <label for="UserName" class="col-sm-3 col-form-label form-control-sm float-left text-right pl-0 pr-0"><b class="text-danger">*</b>用户名：</label>

        <div class="col-sm-9 float-right p-0">

            <input type="text" class="form-control form-control-sm" id="UserName" name="UserName" placeholder="用户名" spellcheck="false"aria-required="true">

        </div>

  <span id=" spantips " style=" position: absolute; margin-top:27px;color:red; display:none; line-height:28px;">
  <i class="layui-icon layui-icon-close-fill mt-2"id="addopen"style="font-size:11px;"></i>      </span>

       </div>

</div>

​

 

1、【on()】方法在被选元素及子元素上添加一个或多个事件处理程序。 如这里添加的blur（）和focus（）的方法。 2、【blur（）】，当元素失去焦点时发生 blur 事件； 3、【focus（）】，当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。4、【hide()】方法隐藏被选元素。5、【show()】方法显示隐藏的被选元素 6、【is()】方法用于查看选择的元素是否匹配选择器。 7、【css()】方法为被选元素设置或返回一个或多个样式属性。 8、【after()】方法在被选元素后插入指定的内容。 9、【trim()】函数用于去除字符串两端的空白字符。

用到jQuery的方法：不了解的可以去了解一下。

判断方法：

、获取input标签的ID，绑定blur和focus方法。（上面有方法的说明）

、声明并赋值获取input标签去空的值。

、判断当前的input是否获取到焦点，

   .若获取到焦点隐藏下面的红色警告，恢复input的边框颜色；

   .若失去焦点，开始判断，若输入值为空，移除先前的警告并提示警告，同时添加红色边框的样式；

  .若值不为空，判断是否符合用户名为（6-20）个字母和数字的组合条件，就是输入的字符是否满足下面的正则，

  .不满足则移除先前的i标签警告语，再追加新的警告语和input标签的样式。

、满足条件则提示输入的用户名可用。

$("#UserName").on("blur focus", function () {//给input标签绑定blur和focus的方法

   var username = $.trim($("#UserName").val());

     if ($(this).is(":focus")) {//判断是否获取焦点

        $("#spantips").hide();//获取到焦点隐藏span的内容

        $("#UserName").css("border-color", "#ced4da");//恢复input的边框颜色

     } else {//失去焦点

         if ($(this).val() == "") {//判断内容是否空

            $("#spantips").show(10, "linear", function () {//显示span标签并回调函数

                $("#addopeni").remove();//若先前显示警告语，那就移除

                $("#addopen").after('<i id="addopeni"style="font-size:12px;"class="">用户名不能为空！</i>'); //获取span标签ID添加i标签警告语

                $("#UserName").css("border-color", "red");//添加input红色边框

            });

         } else {

if (username != "") {//内容不为空

                if (!checkUserName(username)) {//判断是否满足正则

$("#spantips").show(10, "linear", function () {//显示span标签后的回调函数

$("#addopeni").remove();$("#addopen").after('<i id="addopeni"style="font-size:12px;">用户名必须为(6-20)个字母和数字的组合！</i>');

$("#UserName").css("border-color", "red");});

                } else { layer.msg("用户名可用", { offset: '50px' }); }

}}}});

function checkUserName(name) {//用户名必须为6-20个字母和数字的组合=》正则

if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(name)) {return true; }

else {return false; }

}