1.为什么要使用表单验证
1.减轻服务器的压力
2.保证输入的数据符合要求
2.常用的表单验证
1.日期格式 2.表单元素是否为空 3.用户名和密码 4.E-mail地址 5.身份证号码
3.表单选择器
1.常用的表单选择器
nput:匹配所有input、textarea、select和button元素
text:匹配所有单行文本框
password:匹配所有密码框
radio:匹配所有单项按钮
checkbox:匹配所有复选框
submit:匹配所有提交按钮
image:匹配所有图像域
reset:匹配所有重置按钮
button:匹配所有按钮
file:匹配所有文件域
hidden:匹配所有不可见元素
2.属性过滤选择器
enabled:匹配所有可用元素
disabled:匹配所有不可用元素
checked:匹配所有被选中元素
select:匹配所有选中的option元素
4.验证表单内容
1.使用String对象验证邮箱
不能为空
格式正确
2.文本框内容的验证
密码不能为空
不少于6个字符
姓名不能为空
不能有数字
5.使用string对象验证邮箱
思路:
使用val( )方法获取文本框的值
使用indexOf( ) 判断字符串是否包含“@”和“.”
使用方法submit( )提交表单
根据返回值是true还是false来决定是否提交表单
1.非空验证
if (mail == "") {
alert("Email不能为空");
return false;
}
2.字符创查找
indexOf():查找某个指定的字符串值在字符串中首次出现的位置
var str="this is JavaScript";
var selectFirst=str.indexOf("Java");
var selectSecond=str.indexOf("Java",12);
6.文本框内容验证
思路:
1.使用String对象的length属性验证密码的长度
2.验证两次输入密码是否一致
3.使用length属性获取文本长度
4.使用for循环和substring( )方法依次截取单个字符,判断每个字符是否是数字
1.长度验证
if(pwd.length<6){
alert("密码必须等于或大于6个字符");
return false;
}
2.判断字符串是否有数字
使用for循环和substring()方法一次截取单个字符,再判断每个字符是否是数字
for(var i =0;i<user.length;i++){
var j = user.substring(i,i);
if(isNaN(j)==false){
alert("姓名中不能包含数字");
return false;
}
}
7.表单验证需要综合运用元素的事件和方法
1.事件:onblur 失去焦点
onfoces 获得焦点
2.方法:blur() 从文本域中移开焦点
focus() 在文本域中设置焦点,即获得鼠标光标
select()选取文本域中的内容,突出显示输入区域的内容