master

分支 (1)

管理

管理

master

validate
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="vue_2.1.3.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <script src="validator.js"></script>
    <title>validate验证类</title>
</head>
<body>
<style>
    #app{
        margin-top: 50px;
    }
</style>
<div class="container" id="app">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">
        <form>
            <div class="form-group">
                <label for="user">请输入用户名:</label>
                <input type="text" class="form-control" id="user" name="userName" v-model="username">
                <div class="help-block"></div>
            </div>
            <div class="form-group">
                <label for="pwd">请输入密码:</label>
                <input type="password" class="form-control" id="pwd" name="passWord" v-model="password">
                <div class="help-block"></div>
            </div>
            <div class="form-group">
                <label for="phone">请输入手机号码:</label>
                <input type="tel" class="form-control" id="phone" name="phoneNumber" v-model="phone">
                <div class="help-block"></div>
            </div>
            <div class="form-group">
                <label for="email">请输入邮箱:</label>
                <input type="text" class="form-control" id="email" name="emailAddress" v-model="email">
                <div class="help-block"></div>
            </div>
            <button type="button"  class="btn btn-default" @click="save">Submit</button>
        </form>
    </div>
    <div class="col-sm-4"></div>

</div>


<script>
    let vm = new Vue({
        el:'#app',
        data:{
            username:'',
            password:'',
            phone:'',
            email:''
        },
        methods:{
            save(){
                let _this = this;
                let check = new Validator();
                check.add('用户名',_this.username,[
                    'require',
                    'minLength:6',
                    'maxLength:10'
                ],$('#user'));
                check.add('密码',_this.password,[
                    'require',
                    'minLength:6',
                    'maxLength:16'
                ],$('#pwd'));
                check.add('手机号',_this.phone,[
                    'phone'
                ],$('#phone'))
                check.add('邮箱',_this.email,[
                    'email'
                ],$('#email'))
                let result = check.start();
                console.log(result)
                if (result['error']) {
                    $('.help-block').text('')
                    result['dom'].parents('.form-group').find('.help-block').text(result['info']);
                    return false;
                }else{
                    alert('ok')
                }
            }
        }
    })


</script>
</body>
</html>