zoukankan      html  css  js  c++  java
  • 简单的表单验证(js、jquery)

    //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("用户名长度不符合规则!
     用户名长度应为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>
  • 相关阅读:
    诚聘Python等课程兼职讲师
    Ogre3d
    OGRE中 场景管理器,场景节点和实体
    第四天:原型模式建造者模式
    第二天:装饰模式及面向对象设计原则4则
    表达式求值:面向对象版本
    第五天:模板方法外观模式观察者模式
    第三天:代理模式工厂方法抽象工厂
    第一天:简单工厂与策略模式
    idea files count
  • 原文地址:https://www.cnblogs.com/stayreal/p/3922117.html
Copyright © 2011-2022 走看看