正则表达式学习（4）--应用实战(angularJS:ng-model+ng-pattern)

1.帐号名需要1-50个字符，由字母、数字或特殊字符组成；以字母开头；特殊字符为_

html：

<div class="col-md-8 input">
                            <input type="text" ng-model="vm.dbUserName" ng-pattern="/^[a-zA-Z][0-9a-zA-Z_]{0,49}$/" ng-maxlength="50">
                            <p class="p-1">帐号名需要1-50个字符，由字母、数字或特殊字符组成；以字母开头；特殊字符为_</p>
                        </div>

js：

 if (vm.dbUserName == undefined) {
                alert("帐号名需要1-50个字符，由字母、数字或特殊字符组成；以字母开头；特殊字符为_！");
                return;
            }

正则表达式解析：^[a-zA-Z][0-9a-zA-Z_]{0,49}$

^[a-zA-Z]：以字母开头

[0-9a-zA-Z_]{0,49}$：以数字或者是字母，_结尾，可以重复执行0-49次

2.密码需要8-32个字符，至少包含英文、数字和符号 _+-&=!@#$%^*() 中的2种

html:

<div class="col-md-8 input">
                            <input type="password" ng-model="vm.dbPassword1" ng-pattern="/(?!^(\d+|[a-zA-Z]+|[_\+\-&=!@#$%^*()]+)$)^[\w\+\-&=!@#$%\^*()]+$/"  ng-maxlength="32" ng-minlength="8">
                            <p class="p-1">密码需要8-32个字符，至少包含英文、数字和符号 _+-&=!@#$%^*() 中的2种</p>
                        </div>

js:

 if (vm.dbPassword1 == undefined) {
                alert("密码需要8-32个字符，至少包含英文、数字和符号 _+-&=!@#$%^*() 中的2种！");
                return;
            }

正则表达式解析：(?!^(\d+|[a-zA-Z]+|[_\+\-&=!@#$%^*()]+)$)^[\w\+\-&=!@#$%\^*()]+$ 

(?!^( \d   +| [a-zA-Z]  +|  [_\+\-&=!@#$%^*()]  +)$)：表示如果从当前匹配位置开始到结尾是一个不全是大写字母小写字母或数字或符号组成的字符串，就匹配，否则匹配位置保持不变，执行接下来的表达式。简单理解就是从第一个类型相同的字符串后开始作为下一个匹配的初始位置，例如77A，那么下一个匹配的位置从A开始。

^[\w_\+\-&=!@#$%\^*()]  +$：从当前匹配位置开始到结尾以英文、数字、符号组成的字符串

优化后：(?!^(\d+|[a-zA-Z]+|[_\+\-&=!@#$%^*()]+)$)^[\w\+\-&=!@#$%\^*()]{8,32}$

3.请输入备注说明，最多256个字符

html:

 <div class="col-md-8 textarea-div">
                            <textarea name="" id="" cols="30" rows="10" ng-model="vm.dbRemark" ng-maxlength="256"></textarea>
                            <p class="p-1">请输入备注说明，最多256个字符</p>
                        </div>

js:

   if (vm.dbRemark == undefined) {
                alert("请输入备注说明，最多256个字符！");
                return;
            }

参考：

\d	匹配一个数字字符。等价于 [0-9]。

\w	匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。

^	匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。
$	匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。
*	匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
+	匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
?	匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 。? 等价于 {0,1}。