表单校验及正则表达式

Posted 2020-12-14 zjx-959

1：为什么要进行表单验证？

减轻服务器的压力 保证输入的数据符合要求

2：常用的表单验证

日期格式 表单元素是否为空 用户名和密码 E-mail地址 身份证号码

3：为什么使用表单选择器

表单选择器用于选取某些特定的表单元素

所有单选按钮或隐藏的元素

4：非空验证

if (mail == "") {

alert("Email不能为空");

return false; }

5：字符串查找

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

eg:

var str="this is javascript";

var selectFirst=str.indexOf("Java");

var selectSecond=str.indexOf("Java",12);

6:长度验证

if(pwd.length<6){

alert("密码必须等于或大于6个字符");

return false; }

7:判断字符串是否有数字

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

for (var i = 0; i < user.length; i++) { var j = user.substring(i, i + 1);

if (isNaN(j) == false) {

alert("姓名中不能包含数字"); return false;

} }

8:表单验证事件和方法

事件：

onblur：失去焦点，当光标离开某个文本框时触发

onfocus：获得焦点，当光标进入某个文本框时触发

方法：

blur()：从文本域中移开焦点

focus()：在文本域中设置焦点，即获得鼠标光标

select()：选取文本域中的内容，突出显示输入区域的内容

9：为什么需要正则表达式？

简洁的代码 严谨的验证文本框中的内容 生产环境中更为常用的方式

10：定义正则表达式

普通方式：

语法：var reg=/表达式/附加参数;

eg:

var reg=/white/;

var reg=/white/g;

构造函数

语法：

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

eg:

var reg=new RegExp("white");

var reg=new RegExp("white","g");

11:表达式的模式

简单模式

只能表示具体的匹配

eg:

var reg=/china/; var reg=/abc8/;

复合模式

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

eg:

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

 

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