Jquery实现表单校验
html代码如下，复制并保存到新建的 html 文件中，浏览器打开即可查看效果！
渲染中...
html代码如下，复制并保存到新建的 html 文件中，浏览器打开即可查看效果！
<!-- more -->
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>注册页面</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery核心js文件 -->
<script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
<!--引入validate插件-->
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<!--引入国际化插件-->
<script type="text/javascript" src="../js/messages_zh.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<style type="text/css">
label.error {
/*background: url(../img/unchecked.gif) no-repeat 10px 3px;*/
padding-left: 30px;
font-family: georgia;
font-size: 15px;
font-style: normal;
color: red;
}
label.success {
/*background: url(../img/checked.gif) no-repeat 10px 3px;*/
padding-left: 30px;
}
</style>
<script>
/* 使用validate插件实现基本的前端表单校验 */
$(function() {
$("#registerForm").validate({
rules: {
user: {
required: true,
minlength: 3,
maxlength: 10,
digits: true
},
password: {
required: true,
minlength: 6,
maxlength: 10,
},
repassword: {
required: true,
equalTo: "[name='password']"
}
},
messages: {
user: {
required: "必填！",
minlength: "不能少于3位！",
maxlength: "不能多于10位！",
digits: "只允许输入数字！"
},
password: {
required: "必填！",
minlength: "不能少于6位！",
maxlength: "不能多于10位！"
},
repassword: {
required: "必填！",
equalTo: "两次输入不一致！"
}
}
});
});
</script>
</head>
<body style="background-color: lightblue;">
<div class="container" style="background-color: AliceBlue;">
<div style="text-align: center">
<h1>注册页面</h1>
</div>
<div style="text-align: center">
<form action="/myServlet/registerServlet" method="get" id="registerForm">
<p>
帐号：
<input type="text" name="user" id="user" />
</p>
<p>
密码：
<input type="password" name="password" id="password" />
</p>
<p>
确认密码：
<input type="password" name="repassword" id="repassword" />
</p>
<input type="submit" value="注册" />
</form>
</div>
</div>
</body>
</html>
```END
评论
登录后查看和发表评论
前往登录