表单验证

来源：互联网发布：税收数据质量管理编辑：程序博客网时间：2024/06/11 03:20
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-1.11.0.js"></script></head><body>  <h3 style="color: red;margin-left: 300px">以下均为必填项</h3>  <div  style="margin-left: 300px">      <form method="post" action="">       <div>      请填写您的Emile地址:<input type="text" name="email" id="email"/>      <span id="span">请填写有效的Email地址</span>       </div>          <div>              设置您在当当网的昵称:<input type="text" name="names" id="names"/>              <span id="span2">您的昵称可以由英文字母、中文、数字组成</span>          </div>          <div>              设置密码:<input type="password" name="pwd" id="pwd"/>              <span id="span3">您的密码可以由英文字母、中文、数字组成</span>          </div>          <div>              再次输入您的密码:<input type="password" name="pwd2" id="pwd2"/>              <span id="span4">两次输入不一致</span>          </div>          <br/>          <div style="margin-left:200px">          <input type="submit" value="注册"/>          </div>      </form>  </div></body><script type="text/javascript">    $(function () {        var flag=false;        var flag2=false;        var flag3=false;        var flag4=false;        $("#email").blur(function () {            var email=$("#email").val();            var ma=email.match("@");            if(ma==null){                $("#span").text("输入的邮箱不合法");                $("#span").css({"color":"red"});                flag=false;            }else{                $("#span").text("√");                $("#span").css({"color":"green"});                flag=true;            }        });        $("#names").blur(function () {            var name=$("#names").val();            if(name==""){                $("#span2").text("请输入昵称");                $("#span2").css({"color":"red"});            }else{                $("#span2").text("√");                $("#span2").css({"color":"green"});                flag2=true;            }        });        $("#pwd").blur(function () {            var pwd=$("#pwd").val();            if(pwd==""){                $("#span3").text("请输入密码");                $("#span3").css({"color":"red"});                flag3=false;            }else if(pwd.length<3){                $("#span3").text("密码长度不可小于3位!");                $("#span3").css({"color":"red"});            }else{                $("#span3").text("√");                $("#span3").css({"color":"green"});                flag3=true;            }        });        $("#pwd2").blur(function () {            var pwd=$("#pwd").val();            var pwd2=$("#pwd2").val();            if(pwd2!=pwd){                $("#span4").text("两次密码不一致!");                $("#span4").css({"color":"red"});                flag4=false;            }else if(pwd2==""){                $("#span4").text("不可为空!");                $("#span4").css({"color":"red"});            }else{                $("#span4").text("√");                $("#span4").css({"color":"green"});                flag4=true;            }        });    })            </script></html>
阅读全文
0 0