(四) 表单验证技术
进行表单验证:
(思路)获取表单元素的值并进行判断;在表单的提交事件中调用表单验证函数
表单元素的值都为string类型。
string的常用属性和方法(和java相同,唯一区别就是java中的length是方法)
var str = "hello niit";
属性:length 获取字符个数
//获取字符的长度
alert(str.length);
方法:indexOf 查找字符串的位置 lastIndexOf
//获取指定字符的索引位置
alert(str.indexOf("h",3));
alert(str.lastIndexOf("i"));
charAt 获取指定索引位置的字符
//获取指定索引对应的字符
alert(str.charAt(0));
substring(起始位置,结束位置) 根据索引位置来截取
//根据索引位置截取
alert(str.substring(4,7));
substr(起始位置,截取的长度) 根据长度来截取
//根据长度截取
alert(str.substr(4,3));
charCodeAt 获取字符对应的ASCII的值
//获取字符对应的ASCII值
alert("_".charCodeAt(0));
String.fromCharCode 根据ASCII值获取对应的字符
//根据ASCII值获取对应的字符
alert(String.fromCharCode(65));
表单提交方式
表单验证失败,表单还是会提交。两种方式阻止失败的表单提交。
1)onsubmit事件,只有按钮的type 为submit 才能被触发。
onsubmit ="return 函数" onsubmit = true 才会提交
验证的方法里需要返回值 判断是否能够提交
<form id="loginForm" action="success.html" method="post" onsubmit="return validate()">
userName:<input type="text" id="userName" /><br />
password:<input type="password" id="password" /><br />
<input type="submit" value="login" />
</form>
function validate(){
//alert("表单被提交了");
//判断用户名是否填写
if(nameTag.value == ""){
alert("请填写用户名!");
return false;
}
//判断密码是否填写
if(pwdTag.value == ""){
alert("请填写密码!");
return false;
}
//判断密码长度不能低于6位
if(pwdTag.value.length < 6){
alert("密码长度不能小于6位!");
return false;
}
}
2)获取表单元素.submit()的方式
提交按钮要用普通按钮,并且添加点击事件 οnclick="函数"
验证时出现错误需要退出方法 return
<form id="loginForm" action="success.html" method="post">
userName:<input type="text" id="userName" /><br />
password:<input type="password" id="password" /><br />
<input type="button" value="login" onclick="validate()" id="loginButton"/>
</form>
function validate(){
//判断用户名是否填写
if(nameTag.value == ""){
alert("请填写用户名!");
//使光标聚焦文本框
nameTag.focus();
return;
}
//判断密码是否填写
if(pwdTag.value == ""){
alert("请填写密码!");
pwdTag.focus();
return;
}
//获取用户名
var userName = nameTag.value;
//判断用户名是否有效:只能包含数字字母和下划线
for(var i = 0; i < userName.length; i++){
//获取每个字符对应的ASCII
var code = userName.charCodeAt(i);
//获取每个字符
var ch = userName.charAt(i);
//alert(code);
//判断每个字符是否有效
//if((code < 48 || code > 57) && (code < 97 || code > 122) && code != 95){
// alert("用户名必须由数字字母下划线构成!");
// return;
// }
if(!(ch >= "0" && ch <= "9" || ch >= "a" && ch <= "z" || ch == "_")){
alert("用户名必须由数字字母下划线构成!");
//选中当前的文本
nameTag.select();
return;
}
}
//判断密码长度不能低于6位
if(pwdTag.value.length < 6){
alert("密码长度不能小于6位!");
return;
}
//提交表单
var loginForm = document.getElementById("loginForm");
//loginForm.action = "http://www.baidu.com";
loginForm.submit();
}
focus() 使光标聚焦在文本框
select()选中当前的文件
正则表达式(严格区分大小写)
正则表达式就是描述复杂规则的工具。
//编写正则表达式
var rule =/^正则表达式$/;
//使用正则表达式验证
if(rule.test(values)){
alert("验证成功");
}
元字符
var rule = /正则表达式 /;
常用的元字符:
\s 匹配任意的空白字符
^ 匹配字符的开始
$ 匹配字符的结束
. 除换行符以外的任意字符(最少一位)
\w 匹配字母数字或下划线或汉字(汉字只能在java中使用)
\d 匹配数字 0-9
\b 匹配单词的开始或结束(成对出现)\b \b第一个表示开始,第二个表示结束 每个单词需要使用空格间隔
\S \W \D 表示相反的意思
常用的限定符
* 重复任意次数 或 0 次
+ 重复至少一次
? 一次或 0 次
{n} 匹配 n 次
{n,} 匹配 n 以上的次数
{n,m} 匹配 n 到 m 的次数
1)模糊匹配(输入的有hello就可以)
/hello/
2)精确匹配 ^开始 $结束(只能输入hello)
/^hello$/
3)匹配Hello 或 hello
/^(hello)|(Hello)$/
/^(h)|(H)ello$/
4)参数i表示不区分大小写(输入HELLO都可以)
var rule = /^hello$/i;
5)匹配任意字符(至少一位)
/./
匹配任意一位字符
/^.$/
6)匹配niit.com或者是niit.cn 普通的 . 需要转移 \ .
/^niit\.((com)|(cn))$/
7)匹配2位数字或字母或下划线(下面用限定符更简单)
/^\w\w$/
8)匹配1位数字 0-9
/^\d$/
9)\b表示单词的开始或结束,每个单词间需要使用空格间隔
/\bhello\b/
10)任意多次的a
/^a*$/
匹配niit开头的任意多的数字最后位是任意字符
/^niit\d*.$/
11)匹配niit后至少有一个com
/^niit(com)+$/
12)匹配niit开头,后一位要么是数字要么就没有
/^niit\d?$/
13)匹配4位数字
/^\d{4}$/
匹配2-4位的数字
/^\d{2,4}$/
匹配2位以上的数字
/^\d\d+$/
/^\d{2,}$/
14)匹配1个字符必须是a或者b或者c
/^[abc]$/
/^[a-c]$/
15)任意一个数字字母或下划线 \w
/^(([0-9])|([a-z])|([A-Z])|_)$/
16)匹配任意多个数字,要求数字范围在0-5之间
/^[0-5]*$/
17)单字符不为a或b或c
/^[^abc]$/
18)不能为数字
/^\D$/
不能为数字字母或下划线
/^\W$/
验证邮箱
//验证邮箱
//var rule = /^\w+@(\w+\.[a-z,A-Z]+)+$/;
其他的特效
1)回车切换输入
使用键盘输入事件onkeyDown事件
检查输入的是否是回车键-(ASCII码13,tab键的ASCII码为9)
输入改为Tab键的ASCII
onkeyDown 和 onKeyPress事件的区别
onKeyDown事件可以获取所以按键的ASCII,但是对大小写字母不敏感,始终获取大写字母的ASCII
onKeyPress事件只能获取按键区的ASCII,对大小写字母敏感。
function keyDown(){
//获取按键的ASCII
var code = event.keyCode;
//如果按下的是回车键,则更改为TAB键
if(code == 13){
event.keyCode = 9;
}
//判断当前的事件源
//alert(event.srcElement);
if(event.srcElement.type == "button" && event.srcElement.value == "注册"){
//提交表单
registForm.submit();
}
}
2)innerHTML提示信息
通过 span对象.innerHTML=“”在页面上显示
innerHTML 和 innerText 的区别:
innerHTML 可以解析HTML代码innerText是纯文本内容
3)即时错误提示特效
onfocus事件( 聚焦事件) 和 onblur事件(失去聚焦事件 )
当文本框失去聚焦时校验输入内容。
<form action="success.html" method="post" onsubmit="return validate()">
<table>
<tr>
<td>用户名:</td>
<td><input id="name" type="text" onblur="validateName(this)"/><span id="nameError"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input id="pwd" type="password" onblur="validatePwd(this)"/><span id="pwdError"></span></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="登录" /></td>
</tr>
</table>
</form>
<script>
var nameSpan = document.getElementById("nameError");
var pwdSpan = document.getElementById("pwdError");
var nameTag = document.getElementById("name");
var pwd = document.getElementById("pwd");
function validateName(obj){
nameSpan.innerHTML = "";
//非空校验
if(obj.value == ""){
nameSpan.innerHTML = "请填写用户名";
return false;
}
//用户必须是3-12位以上的数字字母下划线
var rule = /^\w{3,12}$/;
if(!rule.test(obj.value)){
nameSpan.innerHTML = "用户名由是3-12位以上的数字字母下划线构成";
return false;
}
return true;
}
function validatePwd(obj){
pwdSpan.innerHTML = "";
if(obj.value == ""){
pwdSpan.innerHTML = "请填写密码";
return false;
}
var rule = /^\w{6,12}$/;
if(!rule.test(obj.value)){
pwdSpan.innerHTML = "密码长度为6~12位";
return false;
}
return true;
}
function validate(){
if(!(validateName(nameTag) && validatePwd(pwd))){
return false;
}
}
</script>
4)拖拽层移动
鼠标按下事件 onmousedown
鼠标移动事件 onmousemove
鼠标松开事件 onmouseup
两种方式:
1)当鼠标点击时,获取该鼠标的坐标,当鼠标移动时,计算移动的x、y距离,然后加上原来的top 和 left 就可以得到现在层的top 和 left值
2)当鼠标点击时,获取该鼠标的坐标到层的上左边距离,当鼠标移动时,获取鼠标的event.x,event.y 分别减去初始鼠标位置到层上左边距离 就可以得到现在层的top 和 left值。
<body>
<div id="div" style="width:100px; height:100px; position:absolute; left:200px; top:50px; background-color:#06F"></div>
<script>
var div = document.getElementById("div");
//鼠标按下的状态
var hasClick = false;
//鼠标的坐标
var x;
var y;
//层的边距
var divLeft;
var divTop;
//鼠标按下的事件
div.onmousedown = function(){
//记录按下的状态
hasClick = true;
//记录按下的点的坐标
x = event.x;
y = event.y;
//记录当前层的边距
divLeft = parseInt(div.style.left);
divTop = parseInt(div.style.top);
}
//鼠标移动的事件
document.onmousemove = function(){
//判断鼠标是否按下
if(hasClick){
//记录移动中的点的坐标
var nowX = event.x;
var nowY = event.y;
//计算移动的距离
var moveX = nowX-x;
var moveY = nowY-y;
//改变层的位置
div.style.left = divLeft+moveX+"px";
div.style.top = divTop+moveY+"px";
}
}
//鼠标松开的事件
div.onmouseup = function(){
hasClick = false;
}
</script>
</body>