美文网首页
2018-04-12

2018-04-12

作者: 啾咪啾咪啾 | 来源:发表于2018-04-12 22:31 被阅读0次

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<fieldset>
<legend>用户注册页</legend>
<form id="myform">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="user"></td>

<td><div id="userTip"></div></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd"></td>

<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="repwd"></td>

<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td>email地址:</td>
<td><input type="password" id="email"></td>

<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="rigist" value="注册"></td>

<td></td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
表单验证需求:
不能为空,只能输入英文+数字,长度在6-12位
密码:
不能为空,只能输入英文,长度在6-8之间
确认密码:
与密码的要求一致
email:不能为空

效果:
获取焦点事件,要给出输入提示内容
失去焦点事件,完成对应元素的验证
    验证成功 -  输入正确的提示
    验证失败 -  输入错误的提示
当提交表单之前,保证表单内所有元素全部都是验证通过的。
*/
//1用户名验证
$("#user").focus(function(){
    $("#userTip").text("请输入英文或数字,长度在6-12位之间").css({"color":"black"});
}).blur(function(){
    var regExp=/^[a-zA-Z0-9]{6,12}$/;
    var $myval=$("#user").val();
    if ($myval==""|| $myval==null) {
        $("#userTip").text("用户名输入不能为空").css({
            "color":"red",
            "font-weight":"bold"
        });
    }
    else if(!regExp.test($myval)){
        $("#userTip").text("用户名输入错误").css({
            "color":"red",
            "font-weight":"bold"
        });
    }
    else{
        $("#userTip").text("输入正确").css({
            "color":"green",
            "font-weight":"bold"
        });
    }
});

</script>
</body>
</html>

相关文章

网友评论

      本文标题:2018-04-12

      本文链接:https://www.haomeiwen.com/subject/xoqqkftx.html