一：表单验证的基本概念
为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，同时也为降低服务器的压力，减少资源损耗，在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
二：表单验证的实现方式
内置对象String
正则表达式
内置对象String基本概念
String 对象用于处理文本，也就是字符串。一个字符串用于存储一系列的字符，通常 JS 字符 串是原始值，可以使用变量声明，也可以使用 new 关键字将字符串定义为一个对象，在 JS 中并不提倡使用 new 关键字创建对象。原始值字符串是没有属性和方法的，但是可以使用 JS 的属性和方法，因为 JS 在执行属性和方法时可以把原始值视为对象。
内置对象String的常用方法
concat()：连接字符串
charAt(index)：返回指定位置的字符,如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串
str.indexOf（searchString,startIndex）：返回子字符串第一次出现的位置，从startIndex开始查找，找不到时返回-1
str.lastIndexOf(searchString,startIndex)： 从由往左找子字符串，找不到时返回-1
substring(start,end) ：提取字符串中介于两个指定下标之间的字符 substr(start,length)：
str.split(separator,number)：字符串分隔成数组,第二个参数表示返回的字符串数组的最大长度
str.replace(rgExp/substr,replaceText) ： 执行的是查找并替换的操作, 返回替换后的字符串,
str.match(rgExp)： 正则匹配，在字符串内检索指定的值，或找到一个或多个正则表达式，该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置
search（）:方法的用法等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1
trim()：去除字符串收尾两端的空格，返回一个新的字符串，不改变原字符串
toLowerCase()，toUpperCase()：toLowerCase方法用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。
onsubmiut事件
该事件适用于做表单提交前的验证
onsubmit 属性指定了一个事件句柄函数。当用户单击了表单中的 Submit 按钮而提交一个表单时，就会调用这个事件句柄函数。
如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。
案例：演示内置对象String表单验证实现方式
<!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;
// }
//方法二
//! ===>判断了空以及长度为0
if(!uname){
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>
<form action="success.html" method = "post" onsubmit="return myf();">
账号: <input id="uname" type="text"> <br>
<!-- 提交 -->
<input type="submit" value = "注册">
</form>
</body>
</html>
获取焦点和失去焦点事件
- js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。
- 获取焦点：节点.οnfοcus=function(){}
- 失去焦点：节点.οnblur=function(){}
正则表达式基本概念
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
正则表达式常用方法
\ 将下一个字符标记为特殊符号
^ 输入字符串的开始位置
$ 输入字符串的结束位置
* 匹配前面子表达式零次或者多次
+ 匹配前面子表达式一次或者多次
？ 匹配前面子表达式零次或者一次
{n} 匹配前面子表达式出现 n 次
{n,} 匹配前面子表达式至少 n 次
{n，m} 匹配前面子字符串至少 n 次，最多 m 次
. 匹配出了 /n 之外的任何当个字符
（x | y） 匹配 x 或者 y
[x y z] 匹配 x 或者 y 或者 z
[^x y z] 匹配除了 x y z 都能匹配
[ a-z] 匹配 a - z 之间的任意字符
\b 匹配单词边界
\B 匹配非单词边界
\d 匹配一个数字字符 等价于 [ 0 - 9 ]
\D 匹配一个非数字字符
\f 换页符
\r 回车符
\n 换行符
\s 空白符
\S 非空白符
\t 制表符
\v 垂直制表符
\w 匹配包括从下划线的任意单词字符 等价于 [ a-z A-Z 0-9 _ ]
案例：演示正则表达式表单验证实现方式
<!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;
//规则
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>
9795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
