表单校验：正则表达式

表单校验

表单选择器：

表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素

语法 							描述 							示例
:input 匹配所有input、textarea、select和button 元素 $("#myform  :input")选取表单中所有的input、select和button元素
:text 匹配所有单行文本框 $("#myform  :text")选取email 和姓名两个input 元素
:password 匹配所有密码框 $("#myform  :password" )选取所有<input type="password" />元素
:radio 匹配所有单项按钮 $("#myform  :radio")选取<input type="radio" />元素
:checkbox 匹配所有复选框 $(" #myform  :checkbox " )选取<input type="checkbox " />元素
:submit 匹配所有提交按钮 $("#myform  :submit " )选取<input type="submit " />元素
:image 匹配所有图像域 $("#myform  :image" )选取<input type=" image" />元素
:reset 匹配所有重置按钮 $(" #myform  :reset " )选取<input type=" reset " />元素
:button 匹配所有按钮 $("#myform  :button" )选取button 元素
:file 匹配所有文件域 $(" #myform  :file" )选取<input type=" file " />元素
:hidden 匹配所有不可见元素，或者type 为hidden的元素 $("#myform  :hidden" )选取<input type="hidden " />、style="display: none"等元素
:enabled 匹配所有可用元素 $(" #userform :enabled" )匹配form内部除编号输入框外的所有元素
:disabled 匹配所有不可用元素 $(" #userform :disabled" )匹配编号输入框
:checked 匹配所有被选中元素（复选框、单项按钮、select 中的option） $(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项
:selected 匹配所有选中的option 元素 $(" #userform :selected" ) 匹配“家乡”中的“北京”选项

字符串验证

非空验证

if (mail == "") {
     alert("Email不能为空");
     return false;
}

字符串查找

indexOf()：查找某个指定的字符串值在字符串中首次出现的位置

长度验证

if(pwd.length<6){
    alert("密码必须等于或大于6个字符");
    return false;
}

判断字符串是否有数字
使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字

for (var i = 0; i < user.length; i++) {
    var j = user.substring(i, i + 1);
    if (isNaN(j) == false) {
        alert("姓名中不能包含数字");
        return false;
    }
}

表单验证需要综合运用元素的事件和方法

类别 			名称 		描述
事件 onblur 失去焦点，当光标离开某个文本框时触发
 onfocus 获得焦点，当光标进入某个文本框时触发
方法 blur() 从文本域中移开焦点
 focus() 在文本域中设置焦点，即获得鼠标光标
 select() 选取文本域中的内容，突出显示输入区域的内容

正则表达式

简洁的代码
严谨的验证文本框中的内容

匹配手机号码的正则表达式：
^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$

普通方式

var reg=/表达式/附加参数
var reg=/white/;
var reg=/white/g;

构造函数

var reg=new RegExp("表达式","附加参数")
var reg=new RegExp("white");
var reg=new RegExp("white","g");

表达式的模式
简单模式
只能表示具体的匹配

var reg=/china/;

复合模式
可以使用通配符表达更为抽象的规则模式

var reg=/^\w+$/;
var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

RegExp对象

RegExp对象的方法

方法 描述
exec 检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test 检索字符串中指定的值，返回true或false

RegExp对象的属性

属性 		描述
global RegExp对象是否具有标志g
ignoreCase RegExp对象是否具有标志i
multiline RegExp对象是否具有标志m

String对象的方法

方法 		描述
match 找到一个或多个正则表达式的匹配
search 检索与正则表达式相匹配的值
replace 替换与正则表达式匹配的字符串
split 把字符串分割为字符串数组

正则表达式符号

符号 		描述
/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符，等价于[0-9]
\D 除了数字之外的任何字符，等价于[^0-9]
\w 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W 任何非单字字符，等价于[^a-zA-z0-9_]
. 除了换行符之外的任意字符
{n} 匹配前一项n次
{n,} 匹配前一项n次，或者多次
{n,m} 匹配前一项至少n次，但是不能超过m次
* 匹配前一项0次或多次，等价于{0,}
+ 匹配前一项1次或多次，等价于{1,}
？ 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

防止表单自动提交的方法

 <form onsubmit="return false">
        <input type = "text">
        <input type = "submit">submit
    </form>

注意：

form表单自动提交规则
form表单中只有一个type=text的input（可以有其他类型的表单），在input中按enter键，会自动提交
form表单中有多个type=text的input，且无type=submit的按钮元素，则在input中按enter键，不会自动提交
form表单中有type=submit的按钮元素，点击按钮元素或者在input中按enter键，会自动提交
form表单中有type=button的按钮元素且有多个input元素，点击按钮元素或者在input中按enter键，不会自动提交