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>
  • 相关阅读:
    springMVC工作原理
    关于VS调试Web 无法启动IIS Express Web 服务器的问题解决
    用泛型创建SqlServerHelper类实现增删改查(一)
    laytpl--前端数据绑定
    安装.NET Core 运行时和托管包后,.Net Core项目选择不到安装的.Net Core Sdk,导致项目加载失败
    .Net上传图片的一些问题
    微信退款参数格式错误
    Ajax设置自定义请求头的两种方法
    asp.net获取当前请求的url
    Windows服务器上使用phpstudy部署PHP程序
  • 原文地址:https://www.cnblogs.com/stayreal/p/3922117.html
Copyright © 2011-2022 走看看