1. 程式人生 > >對頁面不能為空的檢驗,在輸入框裡面提示不能為空的封裝

對頁面不能為空的檢驗,在輸入框裡面提示不能為空的封裝

                <form action="">
                    <div class="group">
                        <label for="">留言內容:</label>
                        <textarea name="leave_content"  placeholder="為了更好地服務您,請在此清晰地描述您的問題"></textarea>                        
                    </div>
                    <div class="group">
                        <input type="text" name="email" placeholder="郵箱(選填)" data-value = "郵箱" id="email"/>        
                    </div>
                    <div class="group">
                        <input type="text" name="mobile" placeholder="手機(必填)" data-value = "手機" id="mobile"/>                            
                    </div>    
                    <div class="group">
                        <input type="text" name="name" placeholder="姓名(必填)" data-value = "姓名" id="name"/>                            
                    </div>                        

                </form>

                  <div class="sub">
                    <button>提交</button>
               </div>

          <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            function checkNull(element,sear,checkEvent) {
                var holder = $('#' + element).attr('placeholder');
                var datavalue = $('#' + element).data('value');  
                if(holder.indexOf(sear) != -1) {
                    var tips = datavalue + '不能為空 *';
                    console.log(tips)
                    let dataval = $('#' + element).val();
                    console.log(dataval)
                    var datas = $('#' + element).parent().find('.redstyle');
                     datas.remove();
                     console.log($.trim(dataval))
                    if($.trim(dataval) == null || $.trim(dataval) == 'undefined' || $.trim(dataval) == '') {
                        var htmls = "<div class='redstyle'>" + tips + "</div>";
                        $('#' + element).parent().append(htmls);
                    }else{
                        console.log(111);
                        if(!!checkEvent){
                            let dbstring = checkEvent(dataval);
                            if(!!dbstring){
                                dbstring = datavalue+dbstring;
                            var htmls = "<div class='redstyle'>" + dbstring + "</div>";
                            $('#' + element).parent().append(htmls);                                
                            }
                        
                        }

                    }  
                }
            }
            
            function blurenvent(ele,event,sear,checkEvent){
                $('#'+ele).on(event,function(){
                    checkNull(ele,sear,checkEvent);
                })
            }
            
            blurenvent('email','blur','必填',checkEmail);
            blurenvent('mobile','blur','必填',checkMolie);
            blurenvent('name','blur','必填','');

            $('.sub button').click(function() {
                checkNull("email",'必填',checkEmail);
                checkNull("mobile",'必填',checkMolie);
                checkNull("name", '必填','');
            })
            
            
//檢查郵箱格式方法
    function checkEmail(str) {
        var re = /^([a-zA-Z0-9_-])

[email protected]([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        if(re.test(str)){
            return ;
        }else{
            return "格式錯誤";
        }
    }
    //檢查手機格式方法
    function checkMolie(str) {
        var re=/^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+(\d{8})$/;
        if(re.test(str)){
            return ;
        }else{
            return "格式錯誤";
        }
    }
    //檢查電話格式方法
    function checkPhone(str) {
        var re=/^([0-9]{3,4}-)?[0-9]{7,8}$/;
        if(re.test(str)){
            return ;
        }else{
            return "格式錯誤";
        }
    }
        </script>

發現程式碼還是比較難讀,而且有點bug,下面是重新構建的js,進行了優化

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            function checkNull(element,sear,callback) {
                var holder = $('#' + element).attr('placeholder');
                var datavalue = $('#' + element).data('value'); 
                let dataval = $('#' + element).val(); 
                var datas = $('#' + element).parent().find('.redstyle');
                datas.remove();
                    if($.trim(dataval) == null || $.trim(dataval) == 'undefined' || $.trim(dataval) == '') {
                        if(holder.indexOf(sear) != -1){
                            tips = datavalue +'不能為空'
                            var htmls = "<div class='redstyle'>" + tips + "</div>";
                            $('#' + element).parent().append(htmls);                            
                        }
                    }else{
                            if (typeof callback === "function"){
                                let dbstring = callback(dataval);
                                if(!!dbstring){
                                    dbstring = datavalue+dbstring;
                                var htmls = "<div class='redstyle'>" + dbstring + "</div>";
                                $('#' + element).parent().append(htmls);                                
                                }
                            
                            }                        
                    } 

            }
            
            function blurenvent(ele,event,sear,checkEvent){
                $('#'+ele).on(event,function(){
                    checkNull(ele,sear,checkEvent);
                })
            }

            var util = {
                checkEmail: function (str) {
                                var re = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                                if(re.test(str)){
                                    return ;
                                }else{
                                    return "格式錯誤";
                                }
                            },
                checkMolie: function (str) {
                                var re=/^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+(\d{8})$/;
                                if(re.test(str)){
                                    return ;
                                }else{
                                    return "格式錯誤";
                                }
                            },
                checkPhone:    function (str) {
                                var re=/^([0-9]{3,4}-)?[0-9]{7,8}$/;
                                if(re.test(str)){
                                    return ;
                                }else{
                                    return "格式錯誤";
                                }
                            }        
            }

            blurenvent('email','blur','必填',util.checkEmail);
            blurenvent('mobile','blur','必填',util.checkMolie);
            blurenvent('name','blur','必填','');

            $('.sub button').click(function() {
                checkNull("email",'必填',util.checkEmail);
                checkNull("mobile",'必填',util.checkMolie);
                checkNull("name", '必填','');
            })


        </script>

好吧,打完收工。。。。。。。

相關推薦

頁面不能檢驗輸入裡面提示不能封裝

                <form action="">                     <div class="group">                         <label for="">留言內容:<

Javascript_06_表單驗證(離開單項輸入提示資訊)

Javascript_06_ 表單驗證(離開單項,輸入框後提示資訊) 說明:對於必須輸入的入力框,游標離開(使用 onblur方法)時進行檢查。假如有錯,紅色的提示資訊直接在該畫面的這個輸入框的後面顯示出來,並把游標重新定向到這個輸入框。 待解決問題: ①    記憶體

jQuery清復選下拉輸入

下拉 div edi 賦值 rop 更改 check sele bsp 在做前端頁面是有時需要清空或者更改一些input輸入框,select下拉框,checkbox復選框,還有普通div,span包裹的值,特別是使用ajax的時候,更需要這些 清空id為靜態aaa的 inp

輸入input型別number時去掉上下箭頭方式

<input type="number" ...> <style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance

android判斷輸入EditText是否

一,通過判斷輸入值長度是否為零 String serch_textip=mEdit1.getText().toString().trim();

在Chrome與火狐中輸入input類型number時如何去除掉的自帶的上下默認箭頭

顯示 image 默認 webkit put 如何 ber textfield app 如何移除input=‘number‘時瀏覽器自帶的上下箭頭: CSS樣式: /* 去除input[type=number]瀏覽器默認的icon顯示 */

處理安卓和ios當頁面原生鍵盤彈出輸入不顯示

client clas bsp 安卓 ios lin style lint targe $(‘input‘).on(‘click‘, function () { var target = this; //

vuejs+elementui欄位值0輸入不顯示

最近一個專案用的vuejs+elementui實現,發現在修改資訊的時候有欄位值為0時,在文字框中不會顯示出來,但是可以通過vue驗證規則,說明其值確實是為0,只是UI沒有顯示出來。這時需要將有可能為0的欄位重新賦下值,例項如下:that.editDialog.formDat

JavaScript 實現textarea限制輸入字數 輸入字數實時統計更新輸入實時字數計算移動端bug解決

表單 var 假設 字體 eve 大網 blog 無法 tin textarea稱文本域,又稱文本區,即有滾動條的多行文本輸入控件,在網頁的提交表單中經常用到。與單行文本框text控件不同,它不能通過maxlength屬性來限制字數,為此必須尋求其他方法來加以限制以達到預設

隨筆:ajax傳遞數組layui父子頁面傳值下來菜單賦值頁面數據獲取表格數據替換字符串

形式 子頁面 html title NPU 傳遞 form 開啟 設置 一.Ajax向後臺傳遞數組問題:(聲明前臺我使用的layui框架)例:我們要多前臺一個數據表格進行批量刪除操作,我們通過復選框選中數據id,將id存入一個數組中,然後利用ajax傳遞給後臺,完成批量刪除

input只輸入數字和js校驗是否輸入只有數字以及游標放輸入輸入裡內容消失

input只輸入數字和js校驗是否輸入框只有數字以及游標放輸入框時,輸入框裡內容消失 input框只能輸入數字: 1 onkeyup="value=value.replace(/[^\d]/g,'')" js校驗是否是純數字 1 if(isNaN(bankAccountNo)){ 2

輸入獲得焦點邊框變顏色失去焦點變顏色輸入內有值變顏色

$('.pcblogin-inp') .focus(function() { $(this).css({ 'border': '1px solid #14C58E', 'background': '#fff' }); }) .blur(function() {

${User.uname} 在頁面上怎麼顯示${User.uname} 而不是顯示存在作用域的使用者名稱?

可能是servlet的版本問題? 檢視 web.xml檔案的配置,如果版本是2.3的是不行的(預設不支援el表示式), 你可以把web.xml的開頭,改成下面的樣子: <?xml version="1.0" encoding="UTF-8"?> <web-a

jquery 複選如果選中就不選中如果不選中就選中。

唉,生活無樂趣,程式碼更加無樂趣。每天一遍文章,督促自己要學習,要寫程式碼。 $("#checkboxAll").bind("click",function(){ //繫結一個事件 var checkboxs=$("[name=checkboxa]"); //找到name=c

當前端頁面遇到不能改變輸入等各種的長短屬性時解決的方法

1.用cssClass屬性 //加入cssClass="tree"屬性 <label class="control-label">區域:</label> <div class="controls" > //樹 <sys:treeselect i

C語言以空格分割以回車結束標記輸入一串數字到一個int陣列中

分析:例如 int a[100]; 輸入:1,2,3,4,5,6(回車換行) 結果:陣列的0-5號元素分別是上述值,打印出來,之後程式結束。 難點:獲取int型的數字輸入不難,scanf("%d",&n);這個只能得到int值,會自動濾出空格和回車換行,如何判斷輸入

android自定義view_ClearEditText帶清按鈕的輸入

建立一個類繼承EditText import android.annotation.SuppressLint; import android.content.Context; import android.graphics.drawable.Drawable; impo

Android開發之一鍵清內容的輸入

前言: 在日常的開發中因為涉及到使用者互動的問題,我們難免會涉及到一些控制元件的使用,比如輸入框EditText,文字顯示控制元件TextView,這些控制元件都是Google在And

jqGrid表格載入返回資料alert一句提示

    loadComplete: function () {                             var re_records = $("#table2").jqGrid('getGridParam', 'records'); //獲取資料總條數