在前端页面如果不想自己手写各种校验，那就可以使用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封装起来了。