码迷,mamicode.com
首页 > Web开发 > 详细

简单的表单验证(js、jquery)

时间:2014-08-19 15:53:34      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   os   io   for   ar   

//javascript代码
    function valForm(){
    var username=document.getElementById("username");
    var pwd=document.getElementById("pwd");
    var repwd=document.getElementById("repwd");
    var email=document.getElementById("email");
    var age=document.getElementById("age");
    var cardid=document.getElementById("cardid");if(username.value==""){
        alert("用户名不能为空");
        return false;
        }else if(username.value.length<4||username.value.length>16){
            alert("用户名长度不符合规则!\n 用户名长度应为4-16个字符");
            return false;
        }else if(pwd.value==""){
             alert("密码不能为空");
             return false;
        }else if(pwd.value!=repwd.value){
            alert("密码不一致");
            return false;
        }else if(email.value.indexOf(".")<0||email.value.indexOf("@")<0){
            alert("邮箱错误");
            return false;
        }else if(parseInt(age.value)<18&&parseInt(age.value)>80) {
            alert("年龄错误");
            return false;
        }else if(reg.test(cardid.value)==false){
            alert("身份证不合法");
            return false;
        }else{
            document.forms[0].submit();
            return false;
            }
    }

 

//Jquery
$(function(){ $("#regUser").click(function(){ if($("#username").val()==""||$("#username").val().length<4){ alert("用户名不符合要求") }else if($("#pwd").val().length<6){ alert("密码不符合要求"); }else if($("#repwd").val()!=$("#pwd").val()){ alert("密码不一致") }else if($("#email").val().indexOf("@")<0||$("#email").val().indexOf(".")<0){ alert("邮箱格式错误") }else if($("#age").val()<18||$("#age").val()>80){ alert("年龄不符合要求") }else{ window.location.href="jquery1.html"; } }) })

body内容

<body>
<form action="js实例.html" method="post">
  <table  border="0">
    <tr>
      <td>用户名</td>
      <td><input type="text" name="username" id="username" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="password" name="pwd" id="pwd" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>重复密码</td>
      <td><input type="password" name="repwd" id="repwd" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>邮箱:</td>
      <td><input type="text" name="email" id="email" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td><input type="text" name="age" id="age" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><a href="#" id="regUser">注册</a></td>
      <td><a href="#" >重置</a></td>
    </tr>
  </table>
</form>
</body>

 

简单的表单验证(js、jquery),布布扣,bubuko.com

简单的表单验证(js、jquery)

标签:style   blog   color   java   os   io   for   ar   

原文地址:http://www.cnblogs.com/stayreal/p/3922117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!