<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/js/jquery.min.js"></script> <!--引入jquery-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="common.css">
<title>Document</title>
</head>
<body>
<div style="text-align: left; line-height: 28px;">
<form action="">
<label>用户名：</label><input type="text" id="username"><br>
<label>备 注：</label><input type="text" id="saytext"><br>
<div style="text-align: center;"><button id="submit">提交</button></div>
</form>
</div>
</body>
<script>
$("#submit").on("click", function() {
var username = $("#username").val()
var saytext = $("#saytext").val()
if (username == "") {
alert("用户名不允许为空")
}
if (saytext == "" || saytext.length >= 10) {
alert("备注不允许为空且不能超过10个字")
}
})
</script>
</html>
后面显示提示语的表单验证
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://shop.ccppg.com.cn/lyecs_style/js/jquery.min.js"></script>
</head>
<body>
<form action="" method="post" οnsubmit="return check()" name="form">
<table>
<tr>
<td>* 用户名</td>
<td><input type="text" class="name" name="admin_name" id=""><span id="uname"></span></td>
</tr>
<tr>
<td>* 密码</td>
<td><input type="password" class="psd" name="admin_pwd" id=""><span id="password"></span></td>
</tr>
<tr>
<td>* 再次输入密码</td>
<td><input type="password" name="pwd" class="passwd" id=""><span id="pwd_again"></span></td>
</tr>
<tr>
<td>* email</td>
<td><input type="email" name="admin_email" class="email"><span id="emails"></span></li>
</td>
</tr>
<tr>
<td><input type="submit" value="添加" class="sub"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
<script>
//验证用户名不能为空 字符在4-15之间
$(".name").on("blur", function() {
var name = $(".name").val();
var len = name.length;
$("#uname").empty();
if (name == '') //判断用户名不为空
{
$("#uname").append("<span style='color:red;'>♠不能为空</span>");
return false;
} else if (len < 4 || len > 15) //用户名在4-15位之间
{
$("#uname").append("<span style='color:red;'>♠用户名在4-15位之间</span>");
return false;
} else {
$("#uname").append("<span style='color:green; font-size:28px;'>☺</span>");
return true;
}
});
//验证密码不能为空 字符在6-16之间
$(".psd").on("blur", function() {
var pwd = $(this).val();
var len = pwd.length;
$("#password").empty();
if (pwd == '') {
$("#password").append("<span style='color:red;'>♠不能为空</span>");
return false;
} else if (len < 6 || len > 16) {
$("#password").append("<span style='color:red;'>♠密码在6-16位之间</span>");
return false;
} else {
$("#password").append("<span style='color:green; font-size:28px;'>☺</span>");
return true;
}
});
//确认密码
$(".passwd").on("blur", function() {
var passwd = $(this).val();
var pwd = $('.psd').val();
$("#pwd_again").empty();
if (passwd == '' || passwd != pwd) {
$("#pwd_again").append("<span style='color:red;'>♠请输入正确的密码</span>");
return false;
} else {
$("#pwd_again").append("<span style='color:green; font-size:28px;'>☺</span>");
return true;
}
});
//验证邮箱格式
$(".email").on("blur", function() {
var email = $(this).val();
$("#emails").empty();
if (email == '' || !email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
$("#emails").append("<span style='color:red;'>♠请输入正确的邮箱</span>");
return false;
} else {
$("#emails").append("<span style='color:green; font-size:28px;'>☺</span>");
return true;
}
});
$(".sub").on("click", function() {
var name = $(".name").val();
var pwd = $(this).val();
var email = $(this).val();
if (name == "" || pwd == "" || email == "") {
alert("不能提交")
} else {
location.href = 'http://www.baidu.com';
}
})
</script>
</body>
</html>
网友评论