在前端頁面如果不想自己手寫各種校驗，那就可以使用jquery-validate.js檔案的校驗；
具體的使用步驟：（基本上就四個大步驟）
首先，導入這個jquery-validate.js檔案和jquery-min.js檔案（後面這個檔案不一定非要是jquery-min.js，也可以是jquery-3.2.1.min.js）。
其次，該js檔案的前端校驗隻能驗證表單中的東西。是以必須要寫一個form表單。（把要校驗的東西放
<form id='hh'>
裡頭，當然了，如果你準備使用Ajax的話，
<form>
中不需要寫action和method了）。
再次，在
<script>
中寫一個
$("#hh").validate({......})
，建議：最好把它放到頁面加載函數中。
最後，在form表單中必須要使用type=submit的按鈕來送出。當點選該按鈕的時候，會去執行你寫在頁面加載函數window.onload中的$（"#hh"）.validate({…});中的這個submitHandler:function(){ }函數,而不是像你往常使用那般 直接送出到某處。
注意：該前端驗證并不會驗證空值（也就是你直接敲空格鍵）。（是以說，在項目進行雙重校驗也是很有必要的）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>雲筆記</title>
<script type="text/javascript" src="scripts/common/jquery.min.js"></script>
<script type="text/javascript" src="scripts/login.js"></script>//下面會有
<script type="text/javascript" src="scripts/cookie.js"></script>
<script src="scripts/jquery.validate.js"></script>
<link rel="stylesheet" href="styles/login.css" target="_blank" rel="external nofollow" />
<style>
label.error {//标簽選擇器
color:red;
}
</style>
</head>
<body>
<form id="zhuce">
<div class="sig sig_out" tabindex='-1' id='zc' style='visibility:hidden;'>
<dl>
<dt>
<div class='header'>
<h3>注 冊</h3>
</div>
</dt>
<dt></dt>
<dt>
<div class='letter'>
<label for="regist_username">使用者名: </label>
<input type="text" name="name" id="regist_username" tabindex='5'/>
<div id="warning_1" style="display:none"><span></span></div>
</div>
</dt>
<dt>
<div class='letter'>
<label for="nickname">昵 稱: </label>
<input type="text" name="nickname" id="nickname" tabindex='6'/>
</div>
</dt>
<dt>
<div class='letter'>
<label for="regist_password">密 碼: </label>
<input type="password" name="password" id="regist_password" tabindex='7'/>
<div id="warning_2" style="display:none"><span></span></div>
</div>
</dt>
<dt>
<div class='password'>
<label for="final_password"> 确認密碼: </label>
<input type="password" name="final_password" id="final_password" tabindex='8'/>
</div>
</dt>
<dt>
<div>
<input type="submit" name="" id="regist_button" value=' 注 冊 ' tabindex='9'/>
<input type="button" name="" id="back" value=' 返 回 ' tabindex='10'/>
</div>
</dt>
</dl>
</div>
</form>
</div>
<script type="text/javascript">
function get(e){
return document.getElementById(e);
}
get('sig_in').onclick=function(){
get('dl').className='log log_out';
get('zc').className='sig sig_in';
}
get('back').onclick=function(){
get('zc').className='sig sig_out';
get('dl').className='log log_in';
}
window.onload=function(){//js的頁面加載函數
var t=setTimeout("get('zc').style.visibility='visible'",800);
//在這裡的這個前端校驗，我隻校驗使用者名、密碼、确認密碼這三個輸入框。像name/password/final_password都是對應着上面的表單中的相應表單元件的name屬性的值。也就是說下面的rules中的name/password/final_password這三個單詞的位置所寫的隻能是表單元件的name屬性的值。
$('#zhuce').validate({//這裡就是使用jquery-validate前端校驗所需要寫的地方
rules:{
name:{
required:true,
remote: {//這是對你寫的注冊的姓名進行異步校驗，看是否沖突
url: "/user/checkname", //路徑
type: "post", //資料發送方式
data: { //要傳遞的資料
name: function() {//這裡必須這樣寫一個function。而且控制層的checkname方法的傳回值必須為布爾類型
return $("#regist_username").val();
}
//如果在這個位置你有兩個屬性想要傳到背景去校驗，而不是隻有一個name屬性，那麼，你就将這行上面的用藍色作為背景色的那部分再寫一個。有多少個屬性想傳到背景進行異步校驗，那麼這裡就寫多少個藍色背景色的代碼。
}
}
},
password:{required:true,minlength:6},
final_password:{equalTo:"#regist_password"}
},
messages:{
name:{required:"使用者名不能為空",remote:"使用者名已存在"},
password:{required:"密碼不能為空",minlength:"密碼長度至少6位"},
final_password:{equalTo:"密碼不一緻"}
},
submitHandler:function(){//當點選上面表單中的type=submit按鈕時，不會直接将内容送出到某處，而會來執行這裡
// alert(234);
register();//這個方法是我寫在login.js檔案中的一個注冊方法。login.js檔案中的内容将會在下面展示。
}
});
}
</script>
</body>
</html>
下面是控制層Controller中的方法：（或許對應着看，更能了解怎麼使用jquery-validate.js提供的前端頁面校驗。。注意：我在項目中使用的是Springboot架構，對于它的一些注解，你們需要知道，才能夠看懂控制層代碼）
package com.oracle.cloudnote.web;
import com.oracle.cloudnote.bean.Result;
import com.oracle.cloudnote.service.UserService;
import com.oracle.cloudnote.utils.Md5Util;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.web.HttpSessionRequiredException;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.oracle.cloudnote.bean.User;
import javax.servlet.http.HttpSession;
import javax.validation.Valid;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/register")
public Object register(@Valid User user,BindingResult r){//@Valid注解是Springboot架構所吸納的hibernate架構特有的背景驗證所帶的注解
Result result=new Result();
if(r.hasErrors()){//Springboot所吸納的hibernate架構特有的背景驗證錯誤
List<ObjectError> list=r.getAllErrors();
for(ObjectError err:list){
System.out.println(err.getDefaultMessage());
}
result.setSuccess(false);
result.setMsg("格式錯誤");
result.setData(list);
return result;
}
boolean b=userService.register(user);
if(!b){
result.setSuccess(false);
result.setMsg("使用者名已存在");
}
return result;
}
@RequestMapping("/checkname")
public boolean checkName(String name){//如果要使用jquery-validate中的remote來實作名字的異步校驗，這裡的傳回值就必須布爾類型
return userService.checkName(name);//傳回true則表示該使用者名可以注冊
}
@RequestMapping("/login")
public Result login(@Valid User user, HttpSession session){
User u=userService.login(user);
Result r=new Result();
if(u==null){
r.setMsg("使用者名或密碼錯誤");
r.setSuccess(false);
return r;
}
session.setAttribute("user",u);
r.setData(u);
return r;
}
@RequestMapping("/logout")
public Result logout(HttpSession session){
// session.removeAttribute("user");//當資料量大的時候，不适合,應使用如下的方法
session.invalidate();
Result r=new Result();
r.setMsg("退出成功");
return r;
}
@RequestMapping("/changepwd")
public Result changePwd(HttpSession session,String last_password,String new_password){
User user=(User)session.getAttribute("user");
Result r=new Result();
if(!user.getPassword().equals(Md5Util.md5(last_password))){
r.setMsg("輸入的原密碼有誤");
return r;
}else{
user.setPassword(Md5Util.md5(new_password));
userService.changePwd(user);
r.setMsg("密碼修改成功");
}
session.setAttribute("user",user);
r.setData(user);
return r;
}
}
下面的是login.js檔案：
/**
* 頁面初始化後，綁定函數。
*/
$(function(){
//注冊
$("#regist_button").click(function(){
//register();
});
//登入
$("#login").click(function(){
login();
});
//登出
$("#logout").click(function(){
logout();
});
//修改密碼
$("#changePassword").click(function(){
//changepwd();
})
});
//注冊
function register() {
//alert("注冊成功.");
var name=$("#regist_username").val();
var nickname=$("#nickname").val();
var password=$("#regist_password").val();
name=name.trim();
nickname=nickname.trim();
password=password.trim();
$.post('/user/register',{"name":name,"nickname":nickname,"password":password},
function (response) {
if(response.success){
alert("注冊成功");
$("#zc").attr("class","sig sig_out");
$("#dl").attr("class","log log_in");
}else{
//alert("注冊失敗");
alert(response.msg);
if(response.msg=="格式錯誤"){
var errs=response.data;
for(var i=0;i<errs.length;i++){
alert(errs[i].field+"----"+errs[i].defaultMessage);
if(errs[i].field=="name"){
var error=$("#warning_1").children().get(0);
error.innerText=errs[i].defaultMessage;
error.style.color="red";
get('warning_1').style.display='block';
}
if(errs[i].field=="password"){
var error=$("#warning_2").children().get(0);
error.innerText=errs[i].defaultMessage;
error.style.color="red";
get('warning_2').style.display='block';
}
}
}
}
});
}
//登陸
function login() {
//alert("登陸成功.");
var name=$("#count").val();
var password=$("#password").val();
name=name.trim();
password=password.trim();
$.post(//這種方式不能用來傳遞一些特殊參數，比如上傳檔案的參數
"/user/login",
{"name":name,"password":password},
function (response) {//這裡的response就等于是控制層的方法中傳回的result對象
if(response.success){
addCookie("username",response.data.name,1);//注意：因為cookie中隻能儲存字元串，不能儲存整個的對象。是以要把user拆開來儲存
addCookie("id",response.data.id,1);
location.href="edit.html?id=" target="_blank" rel="external nofollow" +response.data.id;
}else{
alert(response.msg);
}
});
}
/**
* 登出
*/
function logout(){
//location.href="login.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;
// console.log(123123);
var id=getCookie("id");
$.post("/user/logout",{"id":id},function (response) {
if(response.success){
delCookie("id");//這兩個方法是定義在cook.js檔案中的
delCookie("username");
location.href="login.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ;
}
});
}
/**
* 修改密碼
*/
function changepwd(){
//alert("修改成功.");
var last_password=$("#last_password").val();
var new_password=$("#new_password").val();
last_password=last_password.trim();
new_password=new_password.trim();
var id=getCookie("id");
$.post(
"/user/changepwd",
{"id":id,"last_password":last_password,"new_password":new_password},
function (response) {
alert(response.msg);
if(response.success){
logout();
}else{
}
});
}
因為在login.js檔案中用到了getCookie等等關于cookie的函數，這些函數都是封裝在cookie.js中的。cookie.js中的内容如下：
//擷取指定名稱的cookie的值
function getCookie(objName) {
//得到分割的cookie名值對
var arrStr = document.cookie.split("; ");
for ( var i = 0; i < arrStr.length; i++) {
//将名和值分開
var temp = arrStr[i].split("=");
if (temp[0] == objName)
return unescape(temp[1]);
}
return "";
}
//添加cookie
function addCookie(objName, objValue, objHours) {
var str = objName + "=" + escape(objValue);
//為0時不設定過期時間，浏覽器關閉時cookie自動消失
if (objHours > 0) {
var ms = objHours * 3600 * 1000;
var date = new Date();
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toGMTString();
}
document.cookie = str;
}
//兩個參數，一個是cookie的名字，一個是值
function setCookie(name, value) {
//此 cookie 将被儲存 30 天
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
//删除cookie
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null) {
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
}
這個cookie.js檔案的用途，比如說：如果整個項目不能使用jsp頁面，隻使用html頁面，這時，你該怎麼在前端頁面中取出在背景session中存的使用者資訊呢？
這時就需要使用cookie了。在前端html頁面把登入成功後的資訊存入cookie中。要取的時候從cookie中取出來。（注意：存入cookie的時候不能直接存一整個對象，而是隻能存字元串）。
是以，在這個檔案中，就把往cookie中存值、取值、以及删除cookie封裝起來了。