BootStrap的validate表單驗證使用
第一步: 引入js
<%
String contextPath = request.getContextPath();
%>
<script src="<%=contextPath%>/static/js/bootstrap/bootstrapValidator.js"></script>
第二步: 頁面中使用
<script type="text/javascript" language="JavaScript">
/*
*表單校驗
*/
$(function () {
$('form' ).bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '請填寫您的姓名'
}
}
},
phone: {
validators: {
notEmpty: {
message: '您應該填寫手機'
},
stringLength: {
min: 11 ,
message: '聯絡方式應該不少於11位'
}
}
},
loginName: {
validators: {
notEmpty: {
message: '請填寫您的登入名'
}
}
},
password: {
validators: {
notEmpty: {
message: '請填寫密碼'
},
stringLength: {
min: 6,
message: '密碼不少於6位'
}
}
},
repeatPassword: {
validators: {
notEmpty: {
message: '請填寫確認密碼'
},
identical: {
field: 'password',
message: '確認密碼與密碼不一致'
},
}
},
validateCode: {
verbose: false,
validators: {
notEmpty: {
message: '請填寫驗證碼'
},
stringLength: {
min: 4,
message: '驗證碼為4位'
},
remote: {
type: 'GET',
url: '/api/validateCode',
message: '驗證碼不匹配',
delay: 1000
}
}
},
idCardNumber: {
verbose: false,
validators: {
notEmpty: {
message: '請填寫身份證號碼'
},
stringLength: {
min: 15,
max: 18,
message: '身份證不少於15位,不高於18位'
},
remote: {
type: 'GET',
//以get方式呼叫介面根據介面返回的valid,true為通過false為未通過
url: '/api/idCard/validate',
message: '身份證不合法或該ID已註冊',
delay: 500
}
}
}
}
})
;
});
/*
* 當點選了確定下單的按鈕後呼叫此方法
* 然後執行表單校驗
* */
function onsubmitFn() {
//表單提交前再進行一次驗證
var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
bootstrapValidator.validate();
//如果驗證通過()則提交表單
return bootstrapValidator.validate();
}
</script>
服務端校驗程式碼示例:
@ResponseBody
@RequestMapping("idCard/validate")
private Map idCardValidate(@RequestParam(defaultValue = "0") String idCardNumber) {
Map dateMap = new HashMap();
//1. 校驗身份證是否合法
dateMap.put("valid", true);
IdCardCheck idCardCheck = new IdCardCheck(idCardNumber);
if (idCardCheck.isCorrect() != 0) {
dateMap.put("valid", false);
return dateMap;
}
return dateMap;
}
第四:貢獻一個身份證校驗的程式碼(嚴格)
package com.air.utils;
public class IdCardCheck {
private static int IS_EMPTY = 1;
private static int LEN_ERROR = 2;
private static int CHAR_ERROR = 3;
private static int DATE_ERROR = 4;
private static int CHECK_BIT_ERROR = 5;
private String idCardNum = null;
private String[] errMsg = new String[]{"身份證完全正確!",
"身份證為空!",
"身份證長度不正確!",
"身份證中有非法字元!",
"身份證中出生日期不合法!",
"身份證校驗位錯誤!"};
private int error = 0;
/**
* 構造方法。
*
* @param idCardNum
*/
public IdCardCheck(String idCardNum) {
// super();
this.idCardNum = idCardNum.trim();
}
/**
* 得到18位身份證。
*
* @return 18位身份證。
*/
public static String toNewIdCard(String tempStr) {
if (tempStr.length() == 18)
return tempStr.substring(0, 6) + tempStr.substring(8, 17);
else
return tempStr.substring(0, 6) + "19" + tempStr.substring(6) + getCheckBit(tempStr);
}
/**
* 得到校驗位。
*
* @return
*/
private static String getCheckBit(String str) {
String temp = null;
if (str.length() == 18)
temp = str;
else
temp = str.substring(0, 6) + "19" + str.substring(6);
String checkTable[] = new String[]{"1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"};
int[] wi = new int[]{7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1};
int sum = 0;
for (int i = 0; i < 17; i++) {
String ch = temp.substring(i, i + 1);
sum = sum + Integer.parseInt(ch) * wi[i];
}
int y = sum % 11;
return checkTable[y];
}
public String getIdCardNum() {
return idCardNum;
}
public void setIdCardNum(String idCardNum) {
this.idCardNum = idCardNum;
}
/**
* 得到身份證詳細錯誤資訊
*
* @return 錯誤資訊。
*/
public String getErrMsg() {
return this.errMsg[this.error];
}
/**
* 是否為空。
*
* @return true: null false: not null;
*/
public boolean isEmpty() {
if (this.idCardNum == null)
return true;
else
return this.idCardNum.trim().length() > 0 ? false : true;
}
/**
* 身份證長度。
*
* @return
*/
public int getLength() {
return this.isEmpty() ? 0 : this.idCardNum.length();
}
/**
* 身份證長度。
*
* @return
*/
public int getLength(String str) {
return this.isEmpty() ? 0 : str.length();
}
/**
* 是否是15身份證。
*
* @return true: 15位 false:其他。
*/
public boolean is15() {
return this.getLength() == 15;
}
/**
* 是否是18身份證。
*
* @return true: 18位 false:其他。
*/
public boolean is18() {
return this.getLength() == 18;
}
/**
* 得到身份證的省份程式碼。
*
* @return 省份程式碼。
*/
public String getProvince() {
return this.isCorrect() == 0 ? this.idCardNum.substring(0, 2) : "";
}
/**
* 得到身份證的城市程式碼。
*
* @return 城市程式碼。
*/
public String getCity() {
return this.isCorrect() == 0 ? this.idCardNum.substring(2, 4) : "";
}
/**
* 得到身份證的區縣程式碼。
*
* @return 區縣程式碼。
*/
public String getCountry() {
return this.isCorrect() == 0 ? this.idCardNum.substring(4, 6) : "";
}
/**
* 得到身份證的出生年份。
*
* @return 出生年份。
*/
public String getYear() {
if (this.isCorrect() != 0)
return "";
if (this.getLength() == 15) {
return "19" + this.idCardNum.substring(6, 8);
} else {
return this.idCardNum.substring(6, 10);
}
}
/**
* 得到身份證的出生月份。
*
* @return 出生月份。
*/
public String getMonth() {
if (this.isCorrect() != 0)
return "";
if (this.getLength() == 15) {
return this.idCardNum.substring(8, 10);
} else {
return this.idCardNum.substring(10, 12);
}
}
/**
* 得到身份證的出生日子。
*
* @return 出生日期。
*/
public String getDay() {
if (this.isCorrect() != 0)
return "";
if (this.getLength() == 15) {
return this.idCardNum.substring(10, 12);
} else {
return this.idCardNum.substring(12, 14);
}
}
/**
* 得到身份證的出生日期。
*
* @return 出生日期。
*/
public String getBirthday() {
if (this.isCorrect() != 0)
return "";
if (this.getLength() == 15) {
return "19" + this.idCardNum.substring(6, 12);
} else {
return this.idCardNum.substring(6, 14);
}
}
/**
* 得到身份證的出生年月。
*
* @return 出生年月。
*/
public String getBirthMonth() {
return getBirthday().substring(0, 6);
}
/**
* 得到身份證的順序號。
*
* @return 順序號。
*/
public String getOrder() {
if (this.isCorrect() != 0)
return "";
if (this.getLength() == 15) {
return this.idCardNum.substring(12, 15);
} else {
return this.idCardNum.substring(14, 17);
}
}
/**
* 得到性別。
*
* @return 性別:1-男 2-女
*/
public String getSex() {
if (this.isCorrect() != 0)
return "";
int p = Integer.parseInt(getOrder());
if (p % 2 == 1) {
return "男";
} else {
return "女";
}
}
/**
* 得到性別值。
*
* @return 性別:1-男 2-女
*/
public String getSexValue() {
if (this.isCorrect() != 0)
return "";
int p = Integer.parseInt(getOrder());
if (p % 2 == 1) {
return "1";
} else {
return "2";
}
}
/**
* 得到校驗位。
*
* @return 校驗位。
*/
public String getCheck() {
if (!this.isLenCorrect())
return "";
if (this.getLength() == 18)
return this.idCardNum.substring(17);
else
return this.getCheckBit();
}
/**
* 得到15位身份證。
*
* @return 15位身份證。
*/
public String to15() {
if (this.isCorrect() != 0)
return "";
if (this.is15())
return this.idCardNum;
else
return this.idCardNum.substring(0, 6) + this.idCardNum.substring(8, 17);
}
/**
* 得到18位身份證。
*
* @return 18位身份證。
*/
public String to18() {
if (this.isCorrect() != 0)
return "";
if (this.is18())
return this.idCardNum;
else
return this.idCardNum.substring(0, 6) + "19" + this.idCardNum.substring(6) + this.getCheckBit();
}
/**
* 校驗身份證是否正確
*
* @return 0:正確
*/
public int isCorrect() {
if (this.isEmpty()) {
this.error = IdCardCheck.IS_EMPTY;
return this.error;
}
if (!this.isLenCorrect()) {
this.error = IdCardCheck.LEN_ERROR;
return this.error;
}
if (!this.isCharCorrect()) {
this.error = IdCardCheck.CHAR_ERROR;
return this.error;
}
if (!this.isDateCorrect()) {
this.error = IdCardCheck.DATE_ERROR;
return this.error;
}
if (this.is18()) {
if (!this.getCheck().equals(this.getCheckBit())) {
this.error = IdCardCheck.CHECK_BIT_ERROR;
return this.error;
}
}
return 0;
}
private boolean isLenCorrect() {
return this.is15() || this.is18();
}
/**
* 判斷身份證中出生日期是否正確。
*
* @return
*/
private boolean isDateCorrect() {
/*非閏年天數*/
int[] monthDayN = {31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31};
/*閏年天數*/
int[] monthDayL = {31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31};
int month;
if (this.is15()) {
month = Integer.parseInt(this.idCardNum.substring(8, 10));
} else {
month = Integer.parseInt(this.idCardNum.substring(10, 12));
}
int day;
if (this.is15()) {
day = Integer.parseInt(this.idCardNum.substring(10, 12));
} else {
day = Integer.parseInt(this.idCardNum.substring(12, 14));
}
if (month > 12 || month <= 0) {
return false;
}
if (this.isLeapyear()) {
if (day > monthDayL[month - 1] || day <= 0)
return false;
} else {
if (day > monthDayN[month - 1] || day <= 0)
return false;
}
return true;
}
/**
* 得到校驗位。
*
* @return
*/
private String getCheckBit() {
if (!this.isLenCorrect())
return "";
String temp = null;
if (this.is18())
temp = this.idCardNum;
else
temp = this.idCardNum.substring(0, 6) + "19" + this.idCardNum.substring(6);
String checkTable[] = new String[]{"1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"};
int[] wi = new int[]{7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1};
int sum = 0;
for (int i = 0; i < 17; i++) {
String ch = temp.substring(i, i + 1);
sum = sum + Integer.parseInt(ch) * wi[i];
}
int y = sum % 11;
return checkTable[y];
}
/**
* 身份證號碼中是否存在非法字元。
*
* @return true: 正確 false:存在非法字元。
*/
private boolean isCharCorrect() {
boolean iRet = true;
if (this.isLenCorrect()) {
byte[] temp = this.idCardNum.getBytes();
if (this.is15()) {
for (int i = 0; i < temp.length; i++) {
if (temp[i] < 48 || temp[i] > 57) {
iRet = false;
break;
}
}
}
if (this.is18()) {
for (int i = 0; i < temp.length; i++) {
if (temp[i] < 48 || temp[i] > 57) {
if (i == 17 && temp[i] != 88) {
iRet = false;
break;
}
}
}
}
} else {
iRet = false;
}
return iRet;
}
/**
* 判斷身份證的出生年份是否未閏年。
*
* @return true :閏年 false 平年
*/
private boolean isLeapyear() {
String temp;
if (this.is15()) {
temp = "19" + this.idCardNum.substring(6, 8);
} else {
temp = this.idCardNum.substring(6, 10);
}
int year = Integer.parseInt(temp);
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)
return true;
else
return false;
}
}
相關推薦
純H5+c3實現表單驗證
mail ida 網址 put 滿足 字段 address ini css3 客戶端驗證是網頁客戶端程序最常用的功能之一,我們之前使用了各種各樣的js庫來進行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至於為啥沒有流行起來估計是兼容性的問題還有就是樣式太醜陋了
表單驗證
java pwd word 用戶註冊 -1 style 字符 text date <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></
JaveWeb 公司項目(4)----- Easyui的表單驗證
過程 -- 目前 要求 今天 和數 希望 小項目 web 前面三篇博文講述的是界面的搭建和數據的傳輸,可以看出目前我做的這個小項目已經有了一個大體的雛形,剩下的就是細節部分的打磨和一些友好的人機交互設計,今天做的是表單的驗證,作為初學者,著實花了一番功夫,所以寫一篇博文將這
jQuery基礎(常用插件 表單驗證,圖片放大鏡,自定義對象級,jQuery UI,面板折疊)
此外 cookie值 添加圖標 tor 列表 需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則,即時顯示異常信息,此外,還允許自定義驗證規則,插件調用方法如下: $(form).vali
第一篇,js表單驗證模板
scrip put func wrong lur ctype lan lang 執行 下面是對於一個email的表單驗證的基本模板<!DOCTYPE html><html lang="en"><head> <meta char
一個表單驗證
wrong spa 插件 position ava char email格式 box eth <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
angular js h5關於表單驗證的例子
checked tro mis scrip att sta error 自定義 account angular js表單驗證 <!DOCTYPE html><html><head lang="en"> <meta charse
Java Script 第10章 JavaScript表單驗證
cnblogs ges scrip isp asc ima javascrip lock 分享 Java Script 第10章 JavaScript表單驗證
表單驗證的設計
解決方案 正則 wan 光有 做了 我只 cnblogs 提示 重要 不說廢話,直接留幹貨。實現的效果:多條表單提交的時候,如果某個表單的輸入不和格式要求,則提示對應的錯誤信息,所有表單的內容合適,則提交到後臺。顯示代碼(這裏的dom的結構不唯一,我只是在我實際的項目中
SpringBoot表單驗證
mage 驗證 log image 技術分享 img 不能 spring blog 需求:年齡在18歲以下的女生不能註冊 處理器中的寫法: 實體類中的寫法: SpringBoot表單驗證
表單驗證 靠name獲取
res 獲取 ems let nbsp jquer 手機 ear sub 表單 靠name獲取 <form class="add-form" name="form" action="#" method="post" autocomplete="on">
jq中的表單驗證插件------jquery.validate
此外 郵箱 method 你們 ostc [0 ade 使用 js代碼 今天我們來說一下表單驗證,有人說我們在進行表單驗證的時候使用正則來驗證是非常麻煩的,現在我來給大家介紹一下表單驗證的插件:jquery.validate.min.js 它是與jquery一起結合
JavaScript表單驗證和正則表達式
sco 集合 innertext ner rep tell 一次 臨時 軟件 JavaScript表單驗證 分為四類: 1.非空驗證 常用於用戶名等 2.相等驗證 常用於驗證兩次輸入的密碼 3.範圍驗證 常用於年齡等
jquery validation表單驗證插件2。
back nbsp $() static 輸入 run hand get () <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t
JavaScript表單驗證
號碼 網址 處理 漢字 dsm 嵌套 15位 使用 修正 匹配中文字符的正則表達式: [u4e00-u9fa5] 評註:匹配中文還真是個頭疼的事。有了這個表達式就好辦了 匹配雙字節字符(包含漢字在內):[^x00-xff] 評註:能夠用來計算字符串的長度(一個雙字節字符長
表單驗證之正則表達式
cti 信用卡 for 整除 develop 虛擬 accep das 一位 1. 手機號驗證 經網絡查詢可知,中國三大運營商號碼波段主要有: (1). 移動號段: 134 135 136 137 138 139 147 150 151 152 157 158
easyui 之表單驗證
pla focus res default code font led disable function 1 /** 2 * 擴展easyui的validator插件rules,支持更多類型驗證 3 */ 4 $.extend($.fn.val
django form表單驗證
錯誤 mail 定義 lap hide else ren end blog 簡單例子: 1 #自定義驗證類 2 class Check_form1(forms.Form): 3 #user就是要驗證的字段,這裏對應前端name <inp
表單驗證提示插件validate
表單驗證提示 插件validate此表單驗證插件會對表單字段進行驗證,實時提示用戶輸入信息,用戶體驗非常好,驗證提示緊隨input框!以下為表單驗證案例代碼:<script type="text/javascript" src="jquery-3.2.1.js"></scri
前端編程提高之旅(十)----表單驗證插件與cookie插件
turn require 屬性 單選 method str 使用 art 存儲 實際項目開發中與用戶交互的常見手法就是採用表單的形式。取得用戶註冊、登錄等信息。而當用戶註冊或登錄後又須要記住用戶的登錄狀態。這就涉及到經常使用的兩個操作:表單驗證與cookie