目录
一、表单验证的实现方式：
1.通过内置对象String实现
1.1 String中的常用方法：
length(); 字符串长度
substr(参数1,参数2); 从指定位置开始截取，截取后面指定数字位数
split(); 分割 按照指定的字符进行分割成字符串数组
indexOf(); 在目标字符串中根据指定的字符查找其对应的下标，如果查找不到则返回-1
charAt(); 在目标字符串根据下标查找对应的字符trim(); 去除字符串左右两端的空格符号
//使用方法例：
var str = "12hkj";
console.log("字符串的长度: "+str.length);
str = "sadhka";
console.log(str.substr(1,2));
console.log(str.substring(2,4));
var names = "张三,里斯,王五,称心";
console.log(typeof(name));
var strs = names.split(',');
console.log(typeof(strs));
for(var i = 0;i<strs.length;i++){
console.log(strs[i]);
}
var s = "hello";
// 在s字符串中查找a的下标
var result = s.indexOf('el');
console.log(result);
var ss = "alsfhksafd";
console.log(ss.charAt(3));1.2 例题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function myf(){
//验证账号是否满足要求
//1.不能为空
//2.长度限制
var uname = document.getElementById("uname").value;
// if(uname.trim().length == 0 || uname.trim() == ""){
// alert("账号不能为空");
// return false;
// }
if(!uname){//! ===>判断了空以及长度为0
alert("账号不能为空");
return false;
}else{//不为空
//验证长度问题（6-12）
if(uname.trim().length <6 || uname.trim().length >12 ){
alert("长度必须在6-12之间");
return false;
}else{//符合长度要求
//判断：只能是小写字母
var flag = true;
for(var i = 0;i<uname.length;i++){
if(uname.charAt(i) < 'a' || uname.charAt(i) >'z'){
flag = false;
break;
}
}
if(!flag){
alert("账号不符合规则,必须是全小写字母");
return false;
}
}
}
return true;
}
</script>
</head>
<body>
<!-- 通过String内置对象实现表单验证 -->
<!--
action:表单中的数据要提交到指定的页面去
method:页面提交请求的方式
get:数据暴露在地址栏上，数据大小限制，数据不安全
post：反之
事件： onsubmiut事件
该事件是有返回的。 作用在form标签上
验证表单数据是否符合要求
如果符合 则跳转
否则 阻止页面跳转
-->
<form action="success.html" method = "post" onsubmit="return myf();">
账号: <input id="uname" type="text"> <br>
<!-- 提交 -->
<input type="submit" value = "注册">
</form>
</body>
</html>通过String提供的方法实现表单验证的功能不够全面，且编写的代码量更大，因此，更多是使用正则表达式。
二、正则表达式实现表单验证
1.正则表达式规则符号：
? 出现0或者1此
. 除了\n以外任意字符
\ 转义符
+ 1次或多次
* 任意次
\w a-zA-Z0-9_ 任取1个
\d 0-9 任取1个
[abc]{5} 取5次
[abc]{5,} 至少取5次
[abc]{5,10} 至少取5次 最多10次test(); 自动匹配规则
2.案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
font-size: 10px;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//账户的正则验证：验证账号必须在6-12位数
function myuname(){
var uname = $("uname").value;
//规则（test()：自动匹配规则）
var regex = /^\d{6,12}$/;
if(!regex.test(uname)){
$("uname_error").innerHTML = "账号必须在6-12之间";
return false;
}
return true;
}
//账户的正则验证：验证账号必须在6-12位数
function mypwd(){
var pwd = $("pwd").value;
//规则
var regex = /^\d{8}$/;
if(!regex.test(pwd)){
$("pwd_error").innerHTML = "密码必须在8位";
return false;
}
return true;
}
//验证年龄 1-150
function myage(){
var age = $("age").value;
//规则--
//1-9 10-99 100-149 150
var regex = /^(([1-9])|[1-9]\d|1[0-4]\d|150)$/;
console.log(regex.test(age));
if(!regex.test(age)){
$("age_error").innerHTML = "年龄必须在1-150之间";
return false;
}else{
$("age_error").innerHTML = "ok";
}
return true;
}
//验证邮箱
function myemail(){
var email = $("email").value;
//1561868458@qq.com zkingzz@sina.cn
var regex = /\w{4,12}@[a-zA-Z]{2,6}\.com|cn/;
if(!regex.test(email)){
$("email_error").innerHTML = "邮箱不符合要求";
return false;
}else{
$("email_error").innerHTML = "ok";
}
return true;
}
function myDemo(){
var unameDemo = myuname();
var pwdDemo = mypwd();
if(!unameDemo && ! pwdDemo){
return false;
}
return true;
}
</script>
</head>
<body>
<form action="success.html" method="post" onsubmit="return myDemo();">
账号 <input id="uname" type="text" onblur="myuname();"> <span id="uname_error"></span>
<br>
密码 <input id="pwd" type="text" onblur="mypwd();"> <span id="pwd_error"></span>
<br>
年龄 <input id="age" type="text" onblur="myage();"> <span id="age_error"></span>
<br>
邮箱 <input id="email" type="text" onblur="myemail();"> <span id="email_error"></span>
<br>
<input type="submit" value = "注册">
</form>
<!--
验证账号必须在6-12位数
验证密码必须是8位
验证年龄 1-150
验证邮箱必须符合规则 @ .
验证手机号 11位
regex = /1[356789]\d{9}/
验证座机 0731-12345678-01
regex =/(\d{3,4}\-)?(\d{7,8})(\-\d{2})?/
验证身份证
regex = /\d{15}|\d{18}/;
-->
</body>
</html>核心：定义好规则，然后使用test();方法自动匹配规则
3.常用的正则表达式：
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力匹配首尾空白字符的正则表达式：^\s*|\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
评注：匹配形式如 0511-4405222 或 021-87888822匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字匹配身份证：\d{15}|\d{18}
评注：中国的身份证为15位或18位匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用匹配特定数字：
^[1-9]\d*$ //匹配正整数
^-[1-9]\d*$ //匹配负整数
^-?[1-9]\d*$ //匹配整数
^[1-9]\d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
评注：最基本也是最常用的一些表达式
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
