简单的表单验证(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("用户名长度不符合规则!\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)

时间: 2024-12-15 01:45:34

简单的表单验证(js、jquery)的相关文章

JQuery中一个简单的表单验证的实例

html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

python+django实现的简单的表单验证源码

下面的内容段是关于python+django实现的简单的表单验证的内容,应该能对大伙也有用途. <html> <head> <title>Form validation example</title> <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.css"> </head>

jquery 一个简单的表单验证实例

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

表单验证插件jquery.validate.js学习

一.前言 在做web应用的时候,数据验证是非常重要的,一个不小心就产生bug,而bug多了显得个人开发能力都有问题,这个时候如果能有一个用着得心应手的验证插件,开发效率也会大大的提高.就好像牛魔王告诉孙悟空,你缺少一件兵器,于是他就抢来了棒子,用着那叫一个爽.三首蛟告诉杨戬,你手里缺少一件兵器,于是他把三首蛟变成了三尖两刃枪里,再配合一个忠心而又嗅觉灵敏的狗狗,办起事来真是事半功倍.今天我也学学这款比较流行的表单验证插件,给自己搞一个好使的兵器. 插件官网:https://jqueryvalid

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

jQuery简单前端表单验证

<!DOCTYPE html> <html> <head> <title>表单验证</title> <script src="../scripts/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("

AngularJs的一个简单的表单验证

最近学习了AngularJs框架,觉得确实特别有用.之前学习了一点点的ASP.NET,它的控件也是挺好的,不过还是没有AngularJs轻巧. 定义一个应用程序myApp,一个控制器.接着是表单的验证. AngularJs中,表单控件的HTML元素有:input select button textarea元素 其实还算是很简单的例子. 不过我觉得对比起ASP那种庞大的控件来说,它确实很轻巧. AngularJS 输入验证$dirty 表单有填写记录$valid 字段内容合法的$invalid

jq中的表单验证插件------jquery.validate

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段(2)email:true                  必须输入正确格式的电子邮件(3)date:true               

表单验证插件 jquery.validata 使用方法

主要分几部分 jquery.validate 基本用法 jquery.validate API说明 jquery.validate 自定义 jquery.validate 常见类型的验证代码 下载地址 jquery.validate插件的文档地址http://docs.jquery.com/Plugins/Validation jquery.validate插件的主页http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jq