暂时只可以达到的程度简单表单验证

Posted smallteeth

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了暂时只可以达到的程度简单表单验证相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .results {
            border: 1px solid red;
            height:20px;
            display:none;
        }
        label {
            display:block;
        }
    </style>
</head>
<body>
    <form  name=‘myform‘ id=‘myform‘>
        <label for="username">
            <span>用户名:</span>
            <input type="text" name="username" value=""  placeholder="admin">
            <div class="results" id="result_username"></div>
        </label>
        <label for="password">
            <span>密码:</span>
            <input type="password" name="password" value="">
            <div class="results" id="result_password"></div>
        </label>         
        <label for="age">
            <span>再次输入密码:</span>
            <input type="password" name="password2" value="">
            <div class="results" id="result_password2"></div>
        </label>
        <label for="school">
            <span>学历:</span>
            <select name=‘school‘>
                <option value="1">本科</option>
                <option value="2">专科</option>
                <option value="3">高中</option>
            </select>
        </label>        
        <label for="hobby[]">
            <span>兴趣:</span>
            <div>
                <input type="checkbox" name="hobby[]" value="1"> 排球
                <input type="checkbox" name="hobby[]" value="2"> 篮球
                <input type="checkbox" name="hobby[]" value="4"> 足球
                <input type="checkbox" name="hobby[]" value="8"> 中国足球
                <input type="checkbox" name="hobby[]" value="16"> 地球
            </div>           
            <div class="results" id="result_hobby"></div>
        </label>
        <label for="from">
            <span>来自:</span>
            <div>
                <input type="radio" name="from" value="1"> 东北
                <input type="radio" name="from" value="2"> 华北
                <input type="radio" name="from" value="3"> 西北
                <input type="radio" name="from" value="4"> 华东
                <input type="radio" name="from" value="5"> 华南
                <input type="radio" name="from" value="6"> 华西
            </div>
            <div class="results" id="result_from"></div>
        </label>      
        <input id=‘register‘ type="button"  value="提交">
    </form>
    <table border=‘1‘>
        <thead >
            <tr>
                <th>用户名</th>
                <th>学历</th>
                <th>兴趣</th>
                <th>来自</th>
                <th>注册时间</th>
            </tr>
        </thead>
    </table>
    <script src=‘./jquery-1.8.3.min.js‘></script>
    <script>
        //扩展jquery把获得的值转换为json格式
        $.fn.serializeObject = function(){
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || ‘‘);
                } else {
                    o[this.name] = this.value || ‘‘;
                }
            });
            return o;
        };
    </script>
    <script>
        var myForm = (function(){
            return {
                el : {},
                init : function() {
                    var that = this;
                    $.extend(that.el,{
                        ‘myform‘: $(‘#myform‘),
                        ‘username‘ : $(‘#result_username‘),
                        ‘password‘ : $(‘#result_password‘),
                        ‘password2‘ : $(‘#result_password2‘),
                        ‘hobby‘: $(‘#result_hobby‘),
                        ‘form‘ : $(‘#result_from‘),
                        ‘register‘ : $(‘#register‘),
                        ‘results‘ :$(‘.results‘)
                    })
                    this.click_hobby();
                    this.click_form();
                    this.focus_or_blur();
                    this.click_register();
                },
                //获得焦点提示用户
                focus_username : function(){
                    this.el.username.css({‘display‘:‘block‘});
                    this.el.username.html(‘只能输入中文或者英文‘);
                },
                //失去焦点判断用户是否符合
                blur_username : function(){                  
                    var pre = this.el.username.prev().val();
                    var reg=/^[\u4E00-\u9FA5A-Za-z]+$/;
                    if (pre==‘‘) {
                        this.el.username.html(‘(必填项)用户名不能为空哦‘);
                        this.el.username.css({‘display‘:‘block‘});
                        return false;
                    }else if (!reg.test(pre)) {
                        this.el.username.html("用户名输入不合法");
                        this.el.username.css({‘display‘:‘block‘});
                        return false;
                    }else{
                        this.el.username.html("");
                        this.el.username.css({‘display‘:‘none‘});
                        return false;
                    }
                },
                //获得焦点提示用户密码
                focus_password : function(){
                    this.el.password.css({‘display‘:‘block‘});
                    this.el.password.html(‘请输入6到12位的密码‘);
                },
                //失去焦点判断用户密码是否符合
                blur_password : function(){
                    var pre = this.el.password.prev().val();                 
                    var reg=/^[\w]{6,12}$/;
                    if(!reg.test(pre)){
                        this.el.password.html("输入的密码必须6到12位");
                        this.el.password.css({‘display‘:‘block‘});
                        return false;
                    }else{
                        this.el.password.html("");
                        this.el.password.css({‘display‘:‘none‘});
                        return false;
                    }
                },
                //获得焦点提示用户密码
                focus_password2 : function(){
                    this.el.password2.css({‘display‘:‘block‘});
                    this.el.password2.html(‘请输入6到12位的密码‘);
                },
                //失去焦点判断用户密码是否符合
                blur_password2 : function(){
                    var pre2 = this.el.password2.prev().val(); 
                    var pre1 = this.el.password.prev().val();                 
                    var reg=/^[\w]{6,12}$/;
                    if(pre2!=pre1){
                        this.el.password2.html("两次密码不一致");
                        this.el.password2.css({‘display‘:‘block‘});
                    }else if(!reg.test(pre2)){
                        this.el.password2.html("输入的密码必须6到12位");
                        this.el.password2.css({‘display‘:‘block‘});
                        return false;
                    }else{
                        this.el.password2.html("");
                        this.el.password2.css({‘display‘:‘none‘});
                        return false;
                    }
                },
                //判断hobby是否有选择
                checked_hobby : function(){
                    var hobbyBox = this.el.hobby.prev().find(‘input‘);
                    var len = hobbyBox.length;
                    for(var i=0;i<len;i++){
                        if(hobbyBox[i].checked==true){
                            return true;
                            break;
                        }
                    }
                    return false;
                },
                //判断地点是否有选择
                checked_form : function(){
                    var formRadio = this.el.form.prev().find(‘input‘);
                    var len = formRadio.length;
                    for(var i=0;i<len;i++){
                        if(formRadio[i].checked==true){
                            return true;
                            break;
                        }
                    }
                },
                //是否合法点击按钮
                Toggle_meet: function(){
                    var that = this;
                    var len = that.el.results.length;
                    for(var i=0;i<len;i++){
                        if($(that.el.results[i]).css(‘display‘) === ‘block‘){
                            return false;
                            break;
                        }
                    }
                    return true;
                },
                //点击提交时做的事
                click_register : function(){
                    var that = this;
                    this.el.register.on(‘click‘,function(){
                        if(!that.checked_hobby()){
                            that.el.hobby.css({‘display‘:‘block‘});
                            that.el.hobby.html(‘至少选择一个爱好‘);
                        }
                        if(!that.checked_form()){
                            that.el.form.css({‘display‘:‘block‘});
                            that.el.form.html(‘请选择来自的地点‘);
                        }
                        that.blur_username();
                        that.blur_password();
                        that.blur_password2();
                        if(that.Toggle_meet){
                            that.myForm_ajax();
                        }
                    }) 
                },
                //当用户点checkbox击时取消提示
                click_hobby : function(){
                    var that = this;
                    var hobbyBox = this.el.hobby.prev().find(‘input‘);
                    hobbyBox.on(‘click‘,function(){
                        if(that.checked_hobby()){
                            that.el.hobby.css({‘display‘:‘none‘});
                            that.el.hobby.html(‘‘);
                        }
                    })
                },
                //当用户点radio击时取消提示
                click_form : function(){
                    var that = this;
                    var formBox = this.el.form.prev().find(‘input‘);
                    formBox.on(‘click‘,function(){
                        if(that.checked_form()){
                            that.el.form.css({‘display‘:‘none‘});
                            that.el.form.html(‘‘);
                        }
                    })
                },
                //用户获得焦点
                focus_or_blur : function(){
                    var that = this;
                    this.el.username.prev().on(‘focus‘,function(){
                        that.focus_username();
                    })
                    this.el.username.prev().on(‘blur‘,function(){
                        that.blur_username();
                    })
                    this.el.password.prev().on(‘focus‘,function(){
                        that.focus_password();
                    })
                    this.el.password.prev().on(‘blur‘,function(){
                        that.blur_password();
                    })
                    this.el.password2.prev().on(‘focus‘,function(){
                        that.focus_password2();
                    })
                    this.el.password2.prev().on(‘blur‘,function(){
                        that.blur_password2();
                    })
                },
                //验证都完成请求我们想要的后台的数据
                myForm_ajax : function(){
                    $.ajax({
                            url :‘./myphp.php‘,
                            type :‘POST‘,
                            data : $(‘#myform‘).serializeObject(),
                            dataType:‘json‘,
                            success : function(data){
                                console.log(data);
                            }
                        }               
                    )
                }
                
            }
        })()
        myForm.init();
    </script>
</body>
</html>

  

以上是关于暂时只可以达到的程度简单表单验证的主要内容,如果未能解决你的问题,请参考以下文章

23PHP 表单 - 验证邮件和URL

如何在 Android Material Stepper 中验证表单?

ASP.NET MVC 表单身份验证 + 授权属性 + 简单角色

php表单 - 验证邮件和URL

HTML javascript 表单 - 我可以通过哪些其他方式使用表单验证来编写这个 javascript 函数

CodeIgniter 简单表单验证返回空白页