前端验证及错误提

Html

Css


    表单验证



    
        
            *邮箱
            
            * 必填项,请输入常用邮箱
        
        
            *用户名
            
            * 必填项,请输入用户名(数字字母下划线)6-12位
        
        
            *密码
            
            * 必填项,请输入6-18位的密码
        
        
            *重复密码
            
            * 必填项,请再输入一次密码

// 验证邮箱
 function checkEmail() {
     var email = document.regForm.email.value;
     var etab = document.getElementById('etab');
     if (email.match(/^[\w-]+@[\w-]+(\.\w+){1,3}$/) == null) {
         etab.innerHTML = '* 邮箱格式不正确.';
         etab.style.color = '#f00';
         return false;
     } else {
         etab.innerHTML = '* 通过验证.';
         etab.style.color = '#0a0';
         return true;
     }
 }

// 验证用户
 function checkUser() {
     var user = document.regForm.user.value;
     var utab = document.getElementById('utab');
     if (user.match(/^\w{6,12}$/) == null) {
         utab.innerHTML = '* 用户名格式不正确.';
         utab.style.color = '#f00';
         return false;
     } else {
         utab.innerHTML = '* 通过验证.';
         utab.style.color = '#0a0';
         return true;
     }
 }

// 验证密码
 function checkPass() {
     console.log(111)
     var pass = document.regForm.pass.value;
     var ptab = document.getElementById('ptab');
     if (pass.length < 6 || pass.length > 18) {
         ptab.innerHTML = '* 密码长度不合法.';
         ptab.style.color = '#f00';
         return false;
     } else {
         ptab.innerHTML = '* 通过验证.';
         ptab.style.color = '#0a0';
         return true;
     }
 }

// 验证重复密码
 function checkRepass() {
     var pass = document.regForm.pass.value;
     var repass = document.regForm.repass.value;
     var rptab = document.getElementById('rptab');
     if (repass !== pass) {
         rptab.innerHTML = '* 两次密码输入不一致.';
         rptab.style.color = '#f00';
         return false;
     } else {
         rptab.innerHTML = '* 通过验证.';
         rptab.style.color = '#0a0';
         return true;
     }
 }

// 提交时 总体验证
 function checkForm() {
     return checkEmail() && checkUser() && checkPass() && checkRepass();
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

前端验证及错误提



代码描述：js前端验证及错误提示

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

无痕

相关代码

表单验证