表单验证...

来源：互联网发布：电脑连不上网络编辑：程序博客网时间：2024/05/18 16:18
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-3.2.1.js"></script></head><body><table border="1">    <tr>        <td bgcolor="blue">邮箱:<input type="text" id="yy"> </td>        <td>必须遵守邮箱格式<span class="youxiang"></span><br></td>    </tr>    <tr>        <td bgcolor="#7fff00">用户名:<input type="text" id="name"> </td>        <td>用户名应该在6-20之间<span class="username"></span><br></td>    </tr>    <tr>        <td bgcolor="aqua">密码:<input type="text" id="pass"> </td>        <td>密码必须大于六位<span class="mima"></span><br></td>    </tr>    <tr>        <td bgcolor="red">确认密码:<input type="text" id="pass2"> </td>        <td><span class="mima2"></span><br></td>    </tr>    <tr>     <td bgcolor="#a52a2a"  colspan="2" align="center"><input type="submit" class="jiao"></td>    </tr></table><!--邮箱:<input type="text" id="yy"><span class="youxiang"></span><br>--><script>    $(function () {        $(".jiao").click(function () {            var you = $("#yy").val().indexOf("@");            if (you == -1) {                $(".youxiang").html("<img src=\"../public/images/cuo.png\" height=\"30\" width=\"30\"/>错误").css("color", "red");            } else {                $(".youxiang").html("<img src=\"../public/images/dui.png\" height=\"30\" width=\"30\"/>可用").css("color", "black");            }            var  name=$("#name").val().length;            if (name<4||name>20){                $(".username").html("<img src=\"../public/images/cuo.png\" height=\"30\" width=\"30\"/>用户名不可用").css("color","red");            }else {                $(".username").html("<img src=\"../public/images/dui.png\" height=\"30\" width=\"30\"/>用户名可用").css("color","black");            }            var  pass=$("#pass").val().length;            var  pass2=$("#pass2").val().length;            if(pass<6||pass===null){                $(".mima").html("<img src=\"../public/images/cuo.png\" height=\"30\" width=\"30\"/>密码长度不正确或者没填写").css("color","red");               //$(".mima2").html("<img src=\"../public/images/cuo.png\" height=\"30\" width=\"30\"/>密码长度不正确").css("color","red");            }else {                $(".mima").html("<img src=\"../public/images/dui.png\" height=\"30\" width=\"30\"/>密码可用").css("color","black");            }            if(pass2<6||pass2===null){                $(".mima2").html("<img src=\"../public/images/cuo.png\" height=\"30\" width=\"30\"/>密码长度不正确或者没填写").css("color","red");                //$(".mima2").html("<img src=\"../public/images/cuo.png\" height=\"30\" width=\"30\"/>密码长度不正确").css("color","red");            }else {                $(".mima2").html("<img src=\"../public/images/dui.png\" height=\"30\" width=\"30\"/>密码可用").css("color","black");              //  $(".mima2").html("<img src=\"../public/images/dui.png\" height=\"30\" width=\"30\"/>密码可用").css("color","black");            }            var  password=$("#pass").val();            var  password2=$("#pass2").val();            if(password!=password2||password2===null){                $(".mima2").html("<img src=\"../public/images/cuo.png\" height=\"30\" width=\"30\"/>密码输入不同").css("color","red");            }        });    })</script></body></html>
阅读全文
0 0