HTML5+setCutomValidity()函數驗證表單實例分享

2024-05-06 16:18:38

字體：大中小

來源：轉載

供稿：網友

本文給大家分享的是在HTML5中結合setCutomValidity()函數實現驗證表單的實例，非常的時間實用，這里推薦給大家，有需要的小伙伴可以參考下。

HTML5表單驗證給前端人員帶來了便利，但是在用戶體驗上存在一些缺陷，默認的提示對用戶很不友好，無法準確的獲取想要的信息。好在大牛們在接口設計的時候提供了setCustomValidilty方法可以自定義提示信息。這是一個好消息，但也存在一些弊端，需要讓開人員做額外的一些處理才達到真正想要的目的。

示例一：

<!DOCTYPE HTML>

<head>

<meta charset="UTF-8">

<title>Html5頁面使用javascript驗證表單判斷輸入</title>

<script language="javascript">

function check(){

var pass1=document.getElementbyid("pass1");

var pass2=document.getElementbyid("pass2");

if (pass1.value!=pass2.value){

pass2.setCustomvalidity("密碼不一致");

else

pass2.setCustomvalidity("");

}

var email=document.getElementbyid("email");

if (!email.checkValidity())

email.setCustomvalidity("請輸入正確的email地址");

}

</script>

</head>

<form id="testForm" onsubmit="return check()">

密碼:<input type="password" name="pass1" id="pass1" /><br/>

確認密碼:<input type="password" name="pass2" id="pass2" /><br/>

Email:<input type="email" name="email" id="email" /><br/>

<input type="submit" />

</form>

示例二：

<!DOCTYPE html>

<html>

<head>

<mata charset="utf-8">

<title>form test</title>

</head>

<body>

<form name="test" action="." method="post">

<input type="text" required pattern="^/d{4}$" oninput="out(this)" placeholder="請輸入代碼" >

<button type="submit">Check</button>

</form>

<script type="text/javascript">

function out(i){

var v = i.validity;

if(true === v.valueMessing){

i.setCustomValidity("請填寫些字段");

}else{

if(true === v.patternMismatch){

i.setCustomValidity("請輸入4位數字的代碼");

}else{

i.setCustomValidity("");

}

}

}

</script>

</body>

</html>