表单校验及正则表达式

表单验证
为什么要进行表单验证?
减轻服务器的压力;保证输入的数据符合要求
常用的表单验证:日期格式、表单元素是否为空、用户名和密码、E-mail地址、身份证号码
为什么使用表单选择器
单选择器用于选取某些特定的表单元素

表单选择器
常用表单选择器 :input:匹配所有Input、textarea、select和button元素;
:text:匹配所有单行文本框;
:password:匹配所有密码框
:radio:匹配所有单项按钮
:checkbox:匹配所有复选框
:submit:匹配所有提交按钮
:image:配所有图像域
:reset:匹配所有重置按钮
:button:匹配所有按钮
:fle:匹配所有文件域
:hidden:匹配所有不可见元素, 或者type为hidden的元素

属性过滤选择器 :enabled:匹配所有可用元素
:disabled:匹配所有不可用元素
:checked:匹配所有被选中元素
:selected:匹配所有选中的option元素

验证表单内容
使用String对象验证邮箱
不能为空
格式正确
文本框内容的验证
密码不能为空
不少于6个字符
姓名不能为空
不能有数字


使用String 对象验证邮箱
实现思路
使用val( )方法获取文本框的值
使用indexOf( ) 判断字符串是否包含“@”和“.”
使用方法submit( )提交表单
根据返回值是true还是false来决定是否提交表单

示例:
非空验证
if (mail == "") { (检测Email是否为空)
alert("Email不能为空");
return false;
}

字符串查找
indexOf():查找某个指定的字符串值在字符串中首次出现的位置
var str="this is JavaScript";
var selectFirst=str.indexOf("Java");
var selectSecond=str.indexOf("Java",12);

文本框内容的验证
实现思路
使用String对象的length属性验证密码的长度
验证两次输入密码是否一致
使用length属性获取文本长度
使用for循环和substring( )方法依次截取单个字符,判断每个字符是
否是数字


长度验证
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():选取文本域中的内容,突出显示输入区域的内容

文本输入提示特效
实现思路
把错误信息显示在<span>中,然后使用html()方法,设置<span>和
</span>之间的内容
编写脚本验证函数
鼠标失去焦点时(blur事件)调用验证函数

原文地址:https://www.cnblogs.com/zjx-959/p/13246622.html