用jQuery完成表單驗證(2)驗證用戶ID

02-04

1驗證用戶id

我們要驗證用戶 id 由字母數字下劃線構成不包括其他元素並且可限定用戶id長度

首先我們要設定一個簡單的輸入表單

<!DOCTYPE HTML>n<html>n<head>n <title></title>n <script src="jquery-3.2.1.min.js"></script>n <script></script>n <meta charset="UTF-8">n <style>n .label{n float: left;n width: 150px;n }n .infobox{n width: 200px;n }n .error{n color: red;n padding-left: 10px;n }n .submit{n margin-left:150px;n margin-top: 10px;n }n </style>n</head>n<body>n <form id="signup" method="post" action="">n <div>n <span class="label">n ENTER USER ID<input type="text" class="infobox" name="userid">nt <span class="error">n ID MUST BE MADE OF LETTERS,NUMBERS,UNDERSCORE.n </span>n </span>n </div>n <input type="submit" class="submit" value="Submit">n </form>n</body>n</html>n

然後我們添加jquery 部分代碼

$(document).ready(function () {n $(".error").hide();n $(".submit").click(function (event) {n var date=$(".infobox").val();n var len = date.length;n if(useid(date)&&len>0&&len<20)n {n $(".error").hide();n }n elsen {n $(".error").show();n event.preventDefault();n }n });n });n function useid(uid) {n var pattern = new RegExp(/^[a-z0-9_]+$/);n return pattern.test(uid);n }n

這樣我們就完成了這一部分的代碼

同樣的我們還可以利用相同的原理完成驗證電子郵件我們只需則改變一些正則表達式.