bootstrap-validator基本使用（自定義驗證身份證號和手機號）

時間 2019-11-29

標籤 bootstrap validator 基本使用自定義驗證身份證手機欄目 Bootstarp 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁</title>
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="apple-touch-icon" href="img/favicon.ico">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <link href="http://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />  

</head>

<body> 
    <form class="" autocomplete="off">
        <div class="form-group">
            <label>姓名</label>
            <input type="text" class="form-control" name="name" />
        </div>
        <div class="form-group">
            <label>身份證號</label>
            <input type="text" class="form-control" name="identity" />
        </div>
        <div class="form-group">
            <label>手機號</label>
            <input type="text" class="form-control" name="tel" />
        </div>
        <div class="form-group">
            <button type="button" id="submit" name="submit" class="btn btn-primary">提交</button>
            <button type="button" id="reset" name="reset" class="btn btn-primary">重置</button>
        </div>
    </form> 
 

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> 
    <script>
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    message: '用戶名驗證失敗',
                    validators: {
                        notEmpty: {
                            message: '用戶名不能爲空'
                        },
                        stringLength: {
                            min: 4,
                            message: '用戶名長度必須大於4個字符'
                        },
                    }
                },
                identity: {
                    validators: {
                        notEmpty: {
                            message: '身份證號碼不能爲空'
                        },
                        callback: {
                            message: '身份證號碼格式錯誤',
                            callback: function (value, validator) {
                                if (!value) {
                                    return true
                                } else if (isCardNo(value)) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    }
                },
                tel: {
                    validators: {
                        notEmpty: {
                            message: '手機號不能爲空'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '手機號格式錯誤'
                        }
                    }
                }
            }
        });

        var bootstrapValidator = $('form').data('bootstrapValidator');

        // 提交時驗證
        $('#submit').on('click', function () {
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                //表單提交的方法、好比ajax提交
                alert('success');
            }
        })

        // 重置表單
        $('#reset').on('click', function () {
            bootstrapValidator.resetForm();
            $('input').val('')
        }) 
        
        // 驗證身份證號
        function isCardNo(card) {
            let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if (reg.test(card) === false) {
                return false
            } else {
                return true
            }
        }
        
        // 驗證手機號
        function checkMobile(str) {
            let re = /^1\d{10}$/
            if (re.test(str)) {
                return true;
            } else {
                return false;
            }
        }

</script>

</body>

</html>

1. 【bootstrap】bootstrapValidator（自定義驗證身份證）
2. js驗證手機號、身份證等
3. js 手機號、身份證驗證
4. 身份證號驗證
5. PHP 驗證身份證號
6. Java 身份證號驗證
7. java 驗證身份證號
8. tp5身份證號驗證
9. PHP身份證號驗證
10. JS 身份證驗證正則手機號驗證正則
更多相關文章...
• XML 驗證 - XML 教程
• DTD 驗證 - DTD 教程
• RxJava操作符（十）自定義操作符
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。