對頁面不能為空的檢驗,在輸入框裡面提示不能為空的封裝
<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_-])
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'); //獲取資料總條數
完成程式設計練習6,但從檔案中讀取所需的資訊。該檔案的第一項應為捐款人數,餘下的內容應為成對的行。在每一對中,第一行為捐款人姓名,第二行為捐款數額。
#include <iostream> #include <fstream> #include <string> #include <stdlib.h>