1.为什么需要表单验证
- 减轻服务器的压力
- 保证输入的数据符合要求
2.表单验证的内容
- 日期是否有效或日期格式是否正确
- 表单元素是否为空
- 用户名和密码E-mail地址是否正确
- 身份证号码等是否是数字
3.String对象
相关属性
1.toLowerCase(): 把字符串转化为小写
2.toUpperCase() : 把字符串转化为大写
3.charAt(index):返回在指定位置的字符
4.indexOf(字符串,index) :查找某个指定的字符串值在字符串中首次出现的位置
5.substring(index1,index2): 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符
4.文本框对象
文本框对象的属性、方法和事件
5.表单验证案例
<body>
<form action="注册成功.html" method="post" onsubmit="return checkAll()">
<label>
<div id="">
账号:<input type="text" id="name" onkeyup="checkname()"/>
<span id="sname" style="color: red;"></span>
</div>
</label>
<label>
<div id="">
密码:<input type="password" id ="pwd"onkeyup="checkpwd()"/>
<span id="spwd" style="color: red;"></span>
</div>
</label>
<label>
<div id="">
确认密码:<input type="password" id="pwd2" onkeyup="checkpwd2()"/>
<span id="spwd2" style="color: red;"></span>
</div>
</label>
<label>
<div id="">
邮箱:<input type="email" id="yx" />
</div>
</label>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
<script type="text/javascript">
//通过id获取组件的方法,传入id
function $ (id){
return document.getElementById(id);
}
//验证方法
function checkname (){
var reg = /^\w{6,10}$/
var name = $("name").value;
if (""==name) {
$("sname").innerHTML="账号不能为空!";
return false;
}else{
if (!reg.test(name)) {
$("sname").innerHTML="账号只能由6-10位数字、字母、下滑线组成!";
return false;
}else{
$("sname").innerHTML="";
return true;
}
}
}
function checkpwd (){
var reg = /^\d{6}$/
var pwd = $("pwd").value;
if (""==pwd) {
$("spwd").innerHTML="密码不能为空!";
return false;
}else{
if (!reg.test(pwd)) {
$("spwd").innerHTML="密码只能由6位数字组成!";
return false;
}else{
$("spwd").innerHTML="";
return true;
}
}
}
function checkpwd2 (){
var pwd = $("pwd").value;
var pwd2 = $("pwd2").value;
if (""==pwd2) {
$("spwd2").innerHTML="不能为空!"
return false;
} else{
if (! pwd == pwd2) {
$("spwd2").innerHTML="请与上次输入密码保持一致";
return false;
} else{
$("spwd2").innerHTML="";
return true;
}
}
}
function checkAll(){
if (!checkname()|| !checkpwd()||!checkpwd2()) {
return false;
} else{
return true;
}
}
</script>