1. 程式人生 > >BootStrap的validate表單驗證使用

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