js驗證表單
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>會員註冊</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--引入校驗工具 -->
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
body {
margin: 0 auto;
margin-top: 150px;
background-image: url("image/regist_bg.jpg");
}
.carousel-inner .item img {
width: 100%;
height: 300px;
}
font {
color: #3164af;
font-size: 18px;
font-weight: normal;
padding: 0 10px;
}
</style>
<script type="text/javascript">
/*
$(function(){
$("#registform").validate({
rules:{
"username":{"required":true
},
"password":{
"required":true,
"rangelength":[6,10]
},
"confirm_password":{
"required":true,
"equalTo":"#password"
},
"email":{
"required": true,
"email":true
},
"name":{
"required": true,
}
},
messages:{
"username":{
"required":"請填寫使用者名稱"
},
"password":{
"required":"請填寫密碼",
"rangelength":"密碼長度應為6-12位"
},
"confirm_password":{
"required":"請填寫密碼",
"equalTo":"兩次密碼輸入不一致"
},
"email":{
"required":"郵箱不能為空",
"email":"請輸入正確的郵箱格式"
},
"name":{
"required": "姓名不能為空"
}
}
});
}); */
</script>
<script type="text/javascript">
//根據id獲取節點
function $(id) {
return document.getElementById(id);
}
//根據id獲取節點的值
function $V(id) {
return $(id).value;
}
//獲取ajax物件
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp')
}
return xhr;
}
//獲取lable元素,將錯誤資訊設定給lable物件
//檢驗使用者名稱不能為空且不能重複
function checkUserName(){
var username=$("username");
var uname=$V("username");
if(uname.length == 0){
$("msg").innerHTML='使用者名稱不能為空';
}else{
$("msg").innerHTML='';
//使用AJAX,驗證使用者名稱是否存在;
var xhr=getXhr();
xhr.open('get','${pageContext.request.contextPath}/checkUsername?uname='+ uname,true);
xhr.send();
xhr.onreadystatechange=function(){
if (xhr.readyState == 4 && xhr.status == 200) {
var value = xhr.responseText;
$("msg").innerHTML=value;
}
}
}
}
//校驗密碼不能為空,且開頭是大寫字母;
function checkPwd(){
var pwd=$V("password");
console.log(pwd);
var reg=/^[A-Z]+[a-z0-9]+$/;
$("msg").innerHTML='';
if(! reg.test(pwd)){
$("msg").innerHTML="以大寫字母開頭,由字母和數字組成";
}
if (pwd.length < 6 || pwd.length > 12){
$("msg").innerHTML="密碼長度為應6-12位";
}
if(pwd.length==0){
$("msg").innerHTML="密碼不能為空";
}
}
//驗證確認密碼
function valitadePwd(){
//獲取元素中的值
var pwd1 = $V("password");
var pwd2 = $V("confirm_password");
console.log(pwd2);
if(pwd2 != pwd1){
$("msg").innerHTML="兩次密碼輸入不一致";
}else{
$("msg").innerHTML="";
}
if(pwd2.length==0){
$("msg").innerHTML="密碼不能為空";
}
}
//驗證emial
function validateEmail(){
var vemail=$V("inputEmail");
var reg=/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/;
if (!reg.test(vemail)) {
$("msg").innerHTML="請輸入正確的郵箱格式";
}else{
$("msg").innerHTML="";
}
}
//驗證姓名
function validateName(){
var name=$V("usercaption");
var reg=/^([\u4e00-\u9fa5]){2,10}$/; //只能是中文,長度為2-7位
if (!reg.test(name)) {
$("msg").innerHTML="請輸入中文姓名長度為2-10位";
}else{
$("msg").innerHTML="";
}
}
//驗證手機號
function validatTel(){
var tel=$V("telephone");
var reg= /^[1][3,4,5,7,8][0-9]{9}$/;
if (!reg.test(tel)) {
$("msg").innerHTML="請輸入合法的手機號";
}else{
$("msg").innerHTML="";
}
}
//更新驗證碼
function changeCode() {
document.getElementById("myCode").src = "${pageContext.request.contextPath}/bulideCode?code="+ new Date().getSeconds();
}
//檢查驗證碼輸入是否正確;
function checkCode() {
//獲取ajax物件
var xhr = getXhr();
//獲取驗證碼輸入框中的值
var vCode = $V("validateCode");
//獲取提交按鈕元素
//建立連線;將值傳入到後端;
xhr.open('get', '${pageContext.request.contextPath}/checkCode?vCode='+ vCode, true);
//傳送請求
xhr.send();
//判斷xhr物件的狀態改變情況
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//獲取響應回的資料
var value = xhr.responseText;
//驗證成功,將提交按鈕設定為可用
if ("驗證成功" == value) {
$("msg").innerHTML="";
$("commitForm").disabled = false;
}else{
//獲取lable元素,並且將資訊設定給lable物件
$("msg").innerHTML=value;
}
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6"
style="background: #fff; padding: 40px 20px; border: 6px solid #ccc;">
<div class="col-sm-3"></div>
<div class="col-sm-7"><font>使用者註冊</font>USER REGISTER<hr/></div>
<form id="registform" class="form-horizontal" style="margin-top:10px;" method="post" action="${pageContext.request.contextPath}/register">
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<label id="msg" style="color:red ;"></label>
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="username" class="col-sm-3 control-label">使用者名稱</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" name="username" onblur="checkUserName()"
placeholder="請輸入使用者名稱">
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password" name="password" onblur=" checkPwd()"
placeholder="大寫字母開頭,長度為6-12位">
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="confirmpwd" class="col-sm-3 control-label">確認密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="confirm_password" name="confirm_password" onblur=" valitadePwd()"
placeholder="請輸入確認密碼">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputEmail" name="email" onblur="validateEmail()"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="usercaption" class="col-sm-3 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="usercaption" name="name" onblur="validateName()"
placeholder="請輸入姓名">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">聯絡方式</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="telephone" name="telephone" onblur="validatTel()"
placeholder="請輸入你的聯絡方式">
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-3 control-label">驗證碼</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="validateCode" name="code" onblur="checkCode()">
</div>
<div class="col-sm-3">
<img id="myCode" src="${pageContext.request.contextPath}/bulideCode" title="看不清,換一張" style="cursor: pointer;" onclick=" changeCode()" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3"></div>
<div class=" col-sm-9">
<input type="submit" id="commitForm" width="100" value="註冊" name="submit" disabled="disabled"
style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>