[学习笔记] 动态网页开发基础之表单验证

# 学习 # · 2020-08-22

表单基本验证技术

1、表单验证的必要性:减轻服务器的压力,保证输入的数据符合要求。

2、表单验证的内容:日期格式、表单元素是否为空、用户名和密码、E-mail地址、身份证号码等。

3、表单验证思路:获得表单元素值,使用JavaScript的一些方法对数据进行判断,当表单提交时,触发事件,对获取的数据进行验证。


表单选择器

1、常见的表单选择器:

:input    //匹配所有input、textarea、select和button元素
:text    //匹配所有单行文本框
:password    //匹配所有密码框
:radio    //匹配所有单项按钮
:checkbox    //匹配所有复选框
:submit    //匹配所有提交按钮
:enabled    //匹配所有可用元素
:disabled    //匹配所有不可用元素
:checked    //匹配所有被选中元素(复选框、单项按钮、select中的option)
:selected    //匹配所有选中的option 元素

2、使用String对象验证:

(1)使用val()方法获取文本框的值。

    var mail = $("myForm:text").val();

(2)使用indexOf()来判断字符串是否包含“@”和“.”字符。

    mail.indexOf("@") == -1;    //不包含@则==-1

(3)使用方法submit()提交表单。

    $("myForm").submit();

3、文本框内容的验证:非空验证、长度验证(.length)、两次输入是否一致等。

4、表单验证的事件:

<input type="text" onblur="myFunction()">    //失去焦点
<input type="text" onfocus="myFunction()">    //获得焦点

5、表单验证的方法:

$(selector).blur(function);    //当元素失去焦点时发生
$(selector).focus(function);    //当元素获得焦点时发生
$(selector).select(function);    //当textarea或文本类型的input元素中的文本被选择(标记)时发生

正则表达式

1、正则表达式(RegExp):简洁的代码,严谨的验证文本框中的内容。

2、定义正则表达式:

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

其中正则表达式的修饰符有:

i    //执行对大小写不敏感的匹配。
g    //执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m    //    执行多行匹配。

3、表达式的模式:简单模式和复合模式。

4、RegExp对象的方法:

RegExpObject.exec(string);    //用于检索字符串中的正则表达式的匹配
RegExpObject.test(string);    //用于检测一个字符串是否匹配某个模式

5、RegExp对象的属性:

global    //RegExp对象是否具有标志g
ignoreCase    //RegExp对象是否具有标志i
multiline    //RegExp对象是否具有标志m

6、String对象的方法:

string.match(regexp);    //找到一个或多个正则表达式的匹配
string.search(searchvalue);    //检索与正则表达式相匹配的值
string.replace(searchvalue,newvalue);    //替换与正则表达式匹配的字符串
string.split(separator,limit);    //把字符串分割为字符串数组

7、正则表达式常用符号:

/.../    //代表一个模式的开始和结束
^        //匹配字符串的开始
$        //匹配字符串的结束
\s        //任何空白字符
\S        //任何非空白字符
\d        //匹配一个数字字符,等价于[0-9]
\D        //匹配除数字之外的任何字符
\w        //匹配一个数字下划线或字母字符,等价于[A-Za-z0-9_]
\W        //匹配任何非单字字符
.        //匹配除了换行符之外的任意字符

8、正则表达式的重复字符:

{n}        //匹配前一项n次
{n,}    //匹配前一项n次或者多次
{n,m}    //匹配前一项至少n次,但不能超过m次
*        //匹配前一项0次或多次,等价于{0,}
+        //匹配前一项1次或多次
?        //匹配前一项0次或1次,等价于{0,1}

使用HTML5的方式验证表单

1、HTML5新增属性:

placeholder        //提供一种提示
required        //规定输入域不能为空
pattern            //规定验证input域的模式(正则表达式)

2、validity属性:

var validityState = document.getElementById("uName").validity;

3、validityState对象:

stepMismatch    //表单元素min、max和step验证
customError        //使用自定义的验证错误提示信息
tooLong            //表单元素maxLength验证
rangeUnderflow    //表单元素min验证
rangeOverflow    //表单元素max验证
valueMissing    //表单元素required验证
typeMismatch    //表单元素email、number、url等类型验证
patternMismatch    //表单元素正则表达式验证
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/82/

评论