关于正则表达式对象test()方法的问题

Write By Monkeyfly

以下内容均为原创&＃xff0c;如需转载请注明出处。

前提

今天在看别人自定义的一个必填项的表单验证的方法时&＃xff0c;发现一个问题&＃xff1a;

HTML代码&＃xff1a;

//data-empty 自定义的属性 存在的话 说明是必填项 不存在 则说明不是必填的
<input type&＃61;"text" placeholder&＃61;"存在data-empty属性" data-empty&＃61;"请输入用户名" >
<input type&＃61;"text" placeholder&＃61;"没有data-empty属性" >
<input type&＃61;"text" placeholder&＃61;"请输入手机或电话" data-empty&＃61;"请输入手机或电话" data-pattern&＃61;"^((0\d{2,3}-?\d{7,8})|(1[35784]\d{9}))$" >

jQuery代码&＃xff1a;

$(function(){$("input").on(&＃39;blur&＃39;, function(event) {//错误信息的提示内容&＃xff0c;已经提前在data-empty属性中定义好了var empty &＃61; $(this).attr("data-empty");//如果文本框的值为空&＃xff0c;则进行弹窗提示if($(this).val() &＃61;&＃61;""){if(empty){//弹窗提示 data-empty 中已定义好的错误提示信息&＃xff08;代码省略了&＃xff09;setTimeout(function(){//1.5秒后移除该弹框提示&＃xff08;代码省略了&＃xff09;},1500)}else{//如果文本框的值为空&＃xff0c;而且没有data-empty属性&＃xff0c;说明它不是必填项&＃xff0c;则不用写else语句alert("该文本框没有data-empty属性");//写else语句仅仅为了测试}}//下面的正则验证&＃xff0c;仅仅用于联系方式文本框&＃xff08;因为只适用于存在data-pattern属性且值不为空的情况&＃xff09;var pattern &＃61; new RegExp( $(this).attr(&＃39;data-pattern&＃39;) );var result &＃61; pattern.test( $(this).val() );if( $(this).val() && !result){//弹窗提示“格式错误”&＃xff0c;且1.5s后自动消失setTimeout(function(){//1.5秒后移除该弹框提示&＃xff08;代码省略了&＃xff09;},1500)}});
}

说明&＃xff1a;

• 其实刚开始看时&＃xff0c;愣是没看明白正则验证的前3行代码&＃xff0c;不知道 result的值何时为true &＃xff0c;何时为false。
• 在查看了正则表达式相关知识和进行了相关的代码测试之后&＃xff0c;才算是真正明白了。

分析&＃xff1a;

• 首先&＃xff0c;我们要知道RegExp 对象表示正则表达式&＃xff0c;它是对字符串执行模式匹配的强大工具。
• 其次&＃xff0c;我们要知道创建 RegExp 对象的语法&＃xff1a;new RegExp(pattern, attributes);
• 参数说明&＃xff1a;
  
  • pattern&＃xff1a;本意为模式&＃xff0c;它是一个字符串&＃xff0c;表示一种正则表达式的匹配模式&＃xff0c;也可以是自定义的正则表达式。
  • attributes&＃xff1a;【可选参数】本意为属性&＃xff0c;是一个可选的字符串&＃xff0c;包含3种属性&＃xff1a;"g"、"i" 和 "m"。分别是&＃xff1a;全局匹配、忽略大小写匹配和多行匹配。
  • 注&＃xff1a;如果 第一个参数pattern 是正则表达式&＃xff0c;而不是字符串&＃xff0c;则必须省略该参数。
• 返回值&＃xff1a;一个新的 RegExp 对象&＃xff0c;具有指定的模式和标志&＃xff08;"g"、"i" 或 "m"&＃xff09;。
• 正则表达式对象的方法&＃xff1a;
  
  • test()方法用于检测一个字符串是否匹配某个模式。&＃xff08;模式就是创建正则表达式对象时传入的字符串参数&＃xff09;
  • 语法&＃xff1a;正则表达式对象.test(string)
  • 返回值&＃xff1a;如果字符串 string 中含有与 正则表达式对象 匹配的文本&＃xff0c;则返回 true&＃xff0c;否则返回false。

//1.首先看前两行代码&＃xff0c;拆开来看var pattern &＃61; new RegExp( $(this).attr(&＃39;data-pattern&＃39;) );var result &＃61; pattern.test( $(this).val() );
//它可以看成是这两部分的结合&＃xff0c;我们一一来判断它们值可能出现的情况。var pattern &＃61; new RegExp( );//创建一个正则表达式对象//括号内需要传递一个参数&＃xff0c;指的是要匹配字符串的模式&＃xff0c;即自定义的字符串过滤或称验证规则。var result &＃61; pattern.test( $(this).val() ); //一般是结合正则表达式对象的test方法来使用。$(this).attr(&＃39;data-pattern&＃39;)//获取该对象的自定义属性值


测试过程1&＃xff1a;

var p &＃61; new RegExp();
console.log(p); /(?:)/
p.test(""); //true
p.test("123"); //true
p.test("aae"); //true

var p &＃61; new RegExp("");
console.log(p); /(?:)/
p.test(""); //true
p.test("123"); //true
p.test("asd"); //true

var p &＃61; new RegExp(undefined);
console.log(p); /(?:)/
p.test(""); //true
p.test("123"); //true
p.test("1234aae"); //true

var p &＃61; new RegExp("undefined");
p.test("123"); //false
p.test("asd"); //false

var p &＃61; new RegExp(null);
p.test("123"); //false
p.test("asd"); //false

测试结果1&＃xff1a;

• 对于正则表达式对象p来说&＃xff0c;如果创建对象时传入的字符串参数为空&＃xff08;""&＃xff09;&＃xff0c;传入一个undefined&＃xff0c;或者没传任何参数&＃xff0c;此时调用它的test()方法能匹配到任何字符串&＃xff0c;因此test()方法的返回值都为true。&＃xff08;这相当于匹配的模式为""、undefined值、或无模式&＃xff09;

总结&＃xff1a;pattern对象对空字符串("")、undefined值、空值的处理&＃xff0c;都会导致test()方法返回true。

测试过程2&＃xff1a;

//如果属性不存在&＃xff0c;则返回undefined类型
"text" >
var empty &＃61; $(this).attr("data-empty"); //empty &＃61; undefined
console.log(typeof empty); //undefined

//如果属性存在&＃xff08;不管是否为空&＃xff09;都返回string类型
<input type&＃61;"text" data-empty&＃61;"" >
var empty &＃61; $(this).attr("data-empty"); //empty &＃61; ""
console.log(typeof empty); //string

测试结果2&＃xff1a;如果自定义属性存在&＃xff0c;则返回string类型&＃xff0c;如果自定义属性不存在&＃xff0c;则返回undefined类型。

现在&＃xff0c;这个问题就迎刃而解了

//可以这么说&＃xff1a;此处只适用于存在data-pattern属性且值不为空的情况var pattern &＃61; new RegExp( $(this).attr(&＃39;data-pattern&＃39;) );var result &＃61; pattern.test( $(this).val() );//如果不存在data-pattern属性&＃xff0c;result只会返回true。//要进行正则验证&＃xff0c;输入框内肯定有值&＃xff0c;所以 $(this).val() &＃61;&＃61; true//!result 恒为 false//true && false &＃61;&＃61; false //所以&＃xff0c;只要不存在该属性&＃xff0c;if语句是不会执行的if( $(this).val() && !result){//code...}