JavaScript (六)---[表单验证,正则表达式]
目录
- 表单验证
- 正则表达式
表单验证
当在网页中完成表单内容,例如文本框,密码,选择框等;需要对输入的内容进行亚验证,(例如是否输入了数据,是否输入了指定数据);然后再向服务器发送数据.
在表单中使用onsubmit事件;点击submit时就会触发事件.
设置js中的checkForm函数;需要设置布尔值类型的返回值
若返回值为false,则不会同意向服务器发送表单的数据
注意,在使用onsubmit事件时需要用到return ;
例如:onsubmit="return checkForm()"
案例:账号框的输入验证;
- 表单的网页:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
//在函数中需要设置布尔值类型的返回值;若返回值为false,则不会同意向服务器发送表单的数据;
function checkForm(){
//获取账号文本框中输入的值 valueforForm;
var valueforForm=document.getElementById("textId").value;
//获取span标签的id;
var IdforSpan=document.getElementById("spanId");
if(valueforForm.length==0){
IdforSpan.innerHTML="请输入账号!!!";
return false;
}
if(valueforForm.length<8){
IdforSpan.innerHTML="至少输入8位!!!";
return false;
}
//确认无误后,同意向服务器发送数据;
return true;
}
script>
head>
<body>
<form action="假设的服务器.html" method="get" onsubmit="return checkForm()">
账号<input type="text" id="textId" />
<span id="spanId" style="color: crimson; font-family: "楷体";">
span><hr/>
<input type="submit" value="保存一下"/>
form>
body>
html>
-模拟的服务器
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
假设的服务器
body>
html>
演示:
![JavaScript (六)---[表单验证,正则表达式]_第1张图片](http://img.e-com-net.com/image/info8/2fd2447b487b4bd8894ac7f3fb1a763b.gif)
在了解表单验证的基本原理之后;那么在对表单中输入的数据,除了长度的验证,还有数据的格式验证,那么就得提出正则表达式的知识点了.
正则表达式
在学习Java语言的字符串时,就学习了正则表达式的知识点,来验证且判断输入的数据格式;
正则表达式(regular expression) :描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
基本语法：
var reg = new RegExp(“表达式”);
在js中,也可以直接用简单的语法:var reg = /表达式/;
(var result=reg.test(
标签的内容);
这个test方法会对标签中的内容值进行判断;返回布尔类型的值)
部分表达式
^匹配以指定字符开头的字符串
$匹配以指定字符结尾的字符串
*匹配前面的字符式零次或多次
? 允许出现一次或者一次都没有
+ 允许出现一次或者多次
{n}匹配确定的 n 次
{n,}至少匹配n 次
{n,m}匹配n-m次，包含n和m
[0-9]表示0-9之间的任意字符
\d 匹配一个数字字符。等价于 [0-9]
\D 匹配一个非数字字符。等价于 [^0-9]
[a-z]匹配 'a' 到 'z' 范围内的任意小写字母字符
[A-Z]匹配 ‘A’ 到 ‘Z’ 范围内的任意大写字母字符
[^a-z]匹配任何不在 'a' 到 'z' 范围内的任意字符
x|y匹配 x 或 y
\w等价于'[A-Z,a-z,0-9,_(下划线)]‘
\W 等价于 '[^A-Z,a-z,0-9,_(下划线)]‘
只能输入汉字:[\u4e00-\u9fa5]
(和Java语言不同的是,JS语言中单斜杠转义就可以了,而不是Java语言的正则表达式那种双斜杠)
案例:对一个文本框输入的内容使用正则表达式验证;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
function checkForm(value){
//使用规定的表达式指定格式;
//规定文本框内容 以'a' 到 'z' 范围内的任意小写字母字符 开头;且至少8次;且以678结尾;
var reg=/^[a-z]{8,}678$/;
//用test方法对这个标签的内容进行格式判断;
var result=reg.test(value);
//将返回的布尔值输出;
console.log(result);
}
script>
head>
<body>
<input type="text" onchange="checkForm(this.value)"/>
body>
html>
效果:
![JavaScript (六)---[表单验证,正则表达式]_第2张图片](http://img.e-com-net.com/image/info8/23bbd8ecf8c143ed88df55f59419c12d.gif)