1. 程式人生 > >javascript——表單校驗工具程式碼

javascript——表單校驗工具程式碼

    function changeImg(img){
        //改變img標籤中 src的值,實現重新載入的功能  每次的訪問地址都不一樣,因為有變數加入,所以每次都會訪問新的資源。
        img.src = img.src+"?time="+new Date().getTime();
     }
//檢查username輸入框
    function checkUsrname(){
        var canSub = true;
        var username_v = this.value;
        if(checkNull("username","使用者名稱不能為空!"
)==null){ return ; }else{ } } function checkPhonenum(label_phonenum){ var phonenum_v = label_phonenum.value; if(checkNull("phonenum","手機號碼不能為空!")==null){ return ; }else{ if(phonenum_v.length!=11){ document.getElementById("phonenum_msg"
).innerHTML = "<font color='red'> 請輸入11 位手機號碼!</font>"; } } return ; } function checkPsw(label_psw){ var username_v = this.value; if(checkNull("password","密碼不能為空!")==null){ return ; }else{ } } function
checkPsw2(label_psw2){
var psw2 = label_psw2.value; var psw1 = document.getElementsByName("password")[0].value; if(checkNull("password2","確認密碼不能為空!")==null){ return ; }else{ if(psw1!=psw2 && psw1!=null){ document.getElementById("password2_msg").innerHTML = "<font color='red'>兩次密碼不一致!</font>"; } } } function checkEmail(label_email){ var email_v = label_email.value; checkNull("email","郵箱不能為空!"); if(email_v!=null && email_v!="" && !/^\[email protected]\w+(\.\w+)+$/.test(email_v)){ document.getElementById("email_msg").innerHTML = "<font color='red'>郵箱格式不正確!</font>"; // canSub = false; return ; } } function checkValiImg(label_valiStr){ var valiStr = label_valiStr.value; checkNull("valistr","驗證碼不能為空!"); return ; } // //前端頁面格式校驗 // function checkForm(){ // //1.非空校驗 // var canSub = true; // canSub = checkNull("username","使用者名稱不能為空!") && canSub; // canSub = checkNull("password","密碼不能為空!") && canSub; // canSub = checkNull("password2","確認密碼不能為空") && canSub; // canSub = checkNull("phonenum","手機號碼不能為空!") && canSub; // canSub = checkNull("email","郵箱不能為空!") && canSub; // canSub = checkNull("valiStr","驗證碼不能為空!") && canSub; // //2.兩次密碼一致校驗 // var psw1 = document.getElementsByName("password")[0].value; // var psw2 = document.getElementsByName("password2")[0].value; // if(psw1 != psw2){ // document.getElementById("password2_msg").innerHTML = "<font color='red'>兩次密碼不一致!</font>"; // canSub = false; // } // //3.郵箱格式校驗 // var email = document.getElementsByName("email")[0].value; // if(email!=null && email!="" && !/^\[email protected]\w+(\.\w+)+$/.test(email)){ // document.getElementById("email_msg").innerHTML = "<font color='red'>郵箱格式不正確!</font>"; // canSub = false; // } // // return canSub; // // } function checkNull(name,msg){ document.getElementById(name+"_msg").innerHTML = ""; var objValue = document.getElementsByName(name)[0].value; if(objValue==null || objValue==""){ document.getElementById(name+"_msg").innerHTML = "<font color='red'>"+msg+"</font>"; return false; } return true; }

相關推薦

javascript——工具程式碼

function changeImg(img){ //改變img標籤中 src的值,實現重新載入的功能 每次的訪問地址都不一樣,因為有變數加入,所以每次都會訪問新的資源。 img.src = img.src+"?time

JavaScript

確認事件             事件觸發函式             函式操作元素    &nbs

Javascript 的三種方法

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <style type="text/css">        

JavaScript學習——完善註冊頁面

函數 提示 步驟 表格 ges function img 但是 最終 1、之前我們已經使用彈出框的方式實現了表單校驗的功能,但是此種方式用戶體驗效果很差 我們希望做成把提示信息和校驗結果放在輸入欄的後面。 2、步驟分析 (此案例基於HTML&CSS——網站註冊頁面實

JavaScript完成簡單的案例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊介面</title> <script type="text/javascript">

JavaScript進階(四)form

前言       本章將學習表單的校驗,作為一個前面學習的總結! 方法 1.概念 我們知道,在學習HTML的時候,我們做了一個非常醜陋的表單,裡面有文字框、單選鈕、複選框等一系列表單元素。這些都是隨便填寫的,沒有加任何的校驗。也就是說正常情況下我們需

javascript封裝(

先上圖: 產品的需求是點選框內輸入時不提示錯誤,等滑鼠離開時校驗錯誤,那我就這樣寫 //增加提示程式碼 $.prototype.accounterror=function(info){ $(this).next("span").remove(); $(this).aft

JavaScript、ajax提交和資料渲染的流程

 下面簡單封裝了一個類似jquery的ajax工具 (function(global){ let kevin = {}; kevin.ajax = function(type, url, data, headers, callback){ l

javascript以及正則表示式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/java

使用JavaScript實現

使用JavaScript實現表單驗證 最近在學習JavaScript,因此想到使用js實現表單校驗。上網查詢了很多的方法和遇到的問題,現在問題都一一解決,特此陳述案例實現步驟及遇到的問題。 文字框校驗 以下是文字框的校驗步驟。 1.獲取待校驗的

javascript高階之

表單校驗是指:規範資料的輸入格式: 方式一: 思路:(1)建立一個form標籤,使用onsumbit事件 (2)建立文字輸入項,建立submit提交按鈕, (3)使用繫結的第一種方式:1根據id拿到標籤物件,在根據標籤物件拿到該標籤的value值        2if判斷為

JQuery中內容操作函數、validation

調用方法 scrip 註意 語言 rul asc javascrip 最前面插入 獲取 JQuery:內容體拼接(可以直接拼接元素節點和內容節點)   JQuery實現:     方案1:A.append(B); == B.appendTo(A);A的後面拼接B    

常用原生js庫

rim pro fun 常用 ltrim turn () js庫 his 1.字符串去除左右空格繼承形式// 除去左右空格String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g,

常用

通過 let div 返回 letter 常用 fun als 英文 /*用途:檢查輸入字符串是否只由英文字母和數字組成 輸入:obj 字符串 返回:如果通過驗證返回true,否則返回false*/ function isNumberOrLetter(obj){

Angular

result tex lar uil img 輸入 password value mod 1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用戶名

的值$valid、$invalid、$pristine和$dirty

狀態 ng- 愛好 定義 ida from 用戶操作 num $set angular內置了一套表單校驗,其中包含幾個狀態 ① valid、invalid、pristine和dirty   valid標記表單元素有效;   invalid標記表單元素無效;   pristi

長度 username clas 電話 增加 use rul action pwd 1、form表單驗證 <!DOCTYPE html> <html> <head lang="en"> <meta ch

Android註解方式實現

view print tde try success lte ise rdb emp 在開發中總會遇到輸入框的輸入規則限制 比如 電話輸入框電話號碼的校驗,密碼規則的校驗等 ,我們通常做法是提交操作時對每個輸入框的輸入內容進行校驗,很多的if else ,代碼看起來很亂,

案例15-基本的使用validate

true 插件 control 位置 mes lin jquery插件 相關 顯示中文 1 導入插件 <!--引入jquery相關文件 --> <script src="js/jquery-1.11.3.min.js" type="text/ja

jQuery validate 設置失去焦點就和失去焦點就是否通過

checked 設置 ali idt date jquery req BE font js部分 html部分 自定義樣式: /*自定義validate覆蓋掉了 validate 裏面默認的顯示樣式*/ label.error{