Form表单验证:
js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等。完整代码如下:
form-lpb
账号
密码
word"id="pass"onblur="b_pass()"/>
重复密码
word"id="pass1"onblur="b_pass1()"/>
手机号
身份证号
出生年月日
邮箱
爱好
地区
是否同意
公司协议
<script>
// 用户名 校验
function b_userName(){
var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用户名-正则表达式
var c_use = document.getElementById("userName").value;
var c_span_use = document.getElementById("span_userName");
if(reg.test(c_use)){
c_span_use.innerHTML="√";
return true;
}else {
c_span_use.innerHTML="用户名必须以3-9个字母开头,可以有下划线_,后面3-9个数字";
}
}
// 密码 校验
function b_pass(){
var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密码-正则表达式
var c_pass = document.getElementById("pass").value;
var c_span_pass =document.getElementById("span_pass");
if(reg.test(c_pass)){
c_span_pass.innerHTML="√";
return true;
}
else {
c_span_pass.innerHTML="密码必须以3-6个英文字母开头,后面3-9个数字";
return false;
}
}
// 重复密码 校验、
function b_pass1(){
var cm = document.getElementById("pass1").value;
var cm_sp = document.getElementById("span_pass1");
var c_pass = document.getElementById("pass").value;
if(cm==c_pass&&cm!=""){
cm_sp.innerHTML="√";
return true;
}else{
cm_sp.innerHTML="请重复密码";
return false;
}
}
// 手机号 校验
function b_tel(){
var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/;
var c_tel = document.getElementById("tel").value;
var c_span_tel = document.getElementById("span_tel");
if(reg.test(c_tel)){
c_span_tel.innerHTML="√";
return true;
}else {
c_span_tel.innerHTML="手机号可以(+86)第一位是1,第二位是【3,5,8】,共11位数字";
return false;
}
}
// 身份证号 校验
function b_idCard(){
var reg = /\d{17}\w{1}|\d{15}/;
var c_idCard = document.getElementById("idCard").value;
var c_span_idCard = document.getElementById("span_idCard");
if(reg.test(c_idCard)){
c_span_idCard.innerHTML="√";
document.getElementById("year").value=c_idCard.substr(6,4);// 自动 获取 年份
document.getElementById("month").value=c_idCard.substr(10,2);// 自动 获取 月份
document.getElementById("day").value=c_idCard.substr(12,2);
return true;
}else{
c_span_idCard.innerHTML="身份证格式错误,必须是18位数或者是15位数";
document.getElementById("year").value="";// 自动 获取 年份
document.getElementById("month").value="";// 自动 获取 月份
document.getElementById("day").value="";
return false;
}
}
// 邮箱 校验
function b_email(){
var reg = /\w+@\w+\.\w+/;
var c_email = document.getElementById("email").value;
var c_span_email = document.getElementById("span_email");
if(reg.test(c_email)){
c_span_email.innerHTML="√";
return true;
}else {
c_span_email.innerHTML="邮箱格式错误,必须包含 @ 和 . ";
return false;
}
}
// 协议 校验
function c_box(){
var c_b = document.getElementById("ch_box");
var c_sub = document.getElementById("sub");
if(c_b.checked){
c_sub.disabled=false;
}else{
c_sub.disabled=true;
}
}
// sub_return 当点击重新填写时 提交 按钮 恢复为不可用状态
function sub_return(){
var subt = document.getElementById("sub");
subt.disabled=true;
var span_clean = document.getElementsByTagName("span");
for(var i=0;i<=span_clean.length;i++){
var span1 = span_clean[i];
span1.innerHTML= "";
}
}
// 整体 校验
function checkAll(){
var c1 =b_userName();
var c2 =b_pass();
var c3 =b_tel();
var c4 =b_idCard();
var c5 =b_email();
if(c1&&c2&&c3&&c4&&c5){
return true;
}else{
return false;
}
}
</script>
效果如下图所示:
javascript学习指南|javascript怎么用Form表单验证
http://m.bbyears.com/aspjiaocheng/117293.html
推荐访问: