formValidation验证,记录

景星华
2023-12-01


<div class="modal fade" id="ajaxForm" tabindex="-1" role="dialog" aria-labelledby="ajaxFormLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title" id="ajaxFormLabel">模态框(Modal)标题</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form id="defaultForm" class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">用户名</label>
                                                <div class="col-lg-5">
                                                    <input type="text" class="form-control" name="userName" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">密码</label>
                                                <div class="col-lg-5">
                                                    <input type="password" class="form-control" name="userPwd" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">手机号码</label>
                                                <div class="col-lg-5">
                                                    <input type="text" class="form-control" name="telephone" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">邮箱</label>
                                                <div class="col-lg-5">
                                                    <input type="text" class="form-control" name="email" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">角色</label>
                                                <div class="col-lg-5">
                                                    <select class="form-control" id="jues">
                                                        <option value="0" selected>请选择</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-lg-3"></div>
                                                <div class="col-lg-5 text-right">
                                                    <button type="submit" class="btn btn-primary">确定</button>
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal -->
                        </div>
引用formValidation.min.js和bootstrap.min.js(带formValidation);

验证

$('#defaultForm')
        .formValidation({
            message: '您输入的内容无效',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userName: {
                    message: '用户名无效',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 30,
                            message: '姓名必须大于2个字小于30个字'
                        },
                        remote:{
                            type:"get",
                            url:localStorage.getItem("urlBase")+"/user/username",
                            message:'此用户名已存在!',
                            delay:2000
                        }
                    }
                },
                userPwd: {
                    message: '密码格式不正确',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 5,
                            max: 30,
                            message: '密码的长度必须大于5'
                        },
                    }
                },
                telephone: {
                    message: '手机号码无效',
                    validators: {
                        regexp: {
                            regexp: /^1[0-9]{10}$/,
                            message: '请输入有效的手机号'
                        }
                    }
                },
                email: {
                    validators: {
                        emailAddress: {
                            message: '邮箱地址无效'
                        }
                    }
                }
            }
        })
        .on('success.form.fv', function (e) {
            // Prevent form submission
            e.preventDefault();
//zidingyi

js下载地址:

点击打开链接

 类似资料: