2. 程式人生 > >表單校驗

表單校驗

阿新 • • 發佈：2017-11-04
長度 username clas 電話 增加 use rul action pwd

1、form表單驗證

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>驗證</title>
</head>
<body>
<form id="myForm" action="success.html" method="post">
用戶名:<input name="userName" placeholder="請輸入用戶名">
<button type="button" onclick="doSubmit()">登錄</button>
</form>
<!--
可以跳過驗證：
F12
之後把type="button" 改成type="submit"
-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function doSubmit(){
var userName=$("[name=‘userName‘]").val();
if(userName==""){
alert("用戶名不能為空");
return;
}
//表單提交
$("#myForm").submit();
}
</script>
</body>
</html>

2、success

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>登錄成功</h1>
</body>
</html>

3、validate驗證框架

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>驗證框架的使用</title>
<style type="text/css">
.error{
color: red;
}
</style>
</head>
<body>
<form action="success.html" method="post" id="myForm">
用戶名：<input name="userName"> <br/>
密碼：<input name="password" type="password" id="pwd"> <br/>
確認密碼：<input name="repPassword"type="password" > <br/>
郵箱：<input name="email"> <br/>
手機號：<input name="phone"> <br/>
性別：<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女">女<br/>
是否同意協議<input type="checkbox" name="context"><br/>
<button type="submit">註冊</button>
</form>
<!--引入需要的js庫-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//form表單的驗證事件
$("#myForm").validate({
//驗證規則 需要對哪些元素做驗證
rules:{
userName:{
required:true
},
password:{
required:true,
minlength:6,
maxlength:10
},
repPassword:{
required:true,
minlength:6,
maxlength:10,
equalTo:"#pwd"
},
email:{
required:true,
email:true
},
phone:{
required:true,
checkPhone:true //自己書寫的手機驗證正則
},
context:{
required:true
}
}, //rules end
//不符合驗證規則的錯誤信息
messages:{
userName:{
required:"請輸入用戶名"
},
password:{
required:"請輸入密碼",
minlength:"密碼長度不能少於6位",
maxlength:"密碼長度不能大於10位"
},
repPassword:{
required:"請輸入密碼",
minlength:"密碼長度不能少於6位",
maxlength:"密碼長度不能大於10位",
equalTo:"兩次密碼輸入不一致"
},
email:{
required:"請輸入郵箱",
email:"郵箱格式不正確"
},
phone:{
required:"請輸入手機號",
checkPhone:"電話號碼格式不正確"//自己書寫的手機驗證正則
},
context:{
required:"您沒有同意協議"
}
}, // messages end
//鼠標失去焦點立即驗證
onfocusout:function(element){
$(element).valid();
}
}); // end validate
//增加了手機驗證正則
jQuery.validator.addMethod("checkPhone",function(value,element){
var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (tel.test(value));
},"電話號碼格式不正確")
})
</script>
</body>
</html>

表單校驗

相關推薦

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> 用戶名

JavaScript學習——完善註冊頁面表單校驗

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

表單校驗的值$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{

Vue 表單校驗 vee-validate

function eal for ble this code 文字 email onf gitHub 地址：https://github.com/baianat/vee-validate 官網API 地址：https://baianat.github.io/vee-val

JavaScript完成簡單的表單校驗案例

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

js 表單校驗

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>

vue+element中自定義表單校驗特殊字元

本次專案基於vue和element-ui，需要在前端使用者輸入的時候去校驗輸入的內容中是否含有特殊符號，如果有，則提示使用者不支援輸入特殊符號。 校驗規則方法 export function checkSpecificKey(str) { var special

SpringMVC(八)使用@Valid註解實現後臺表單校驗

目錄   依賴jar 配置spring對@valid註解的支援 JSR303定義的校驗型別 如何使用 建立一個pojo類 controller中觸發引數校驗 硬編碼校驗 使用AOP的方式實現校驗 依賴jar <dep

[無心插柳]簡單實現常用的表單校驗函式

有意取而不得，失落而歸。無意間有所獲，未有喜悅，但珍惜依舊 1.前言 表單校驗，相信絕大部分的開發者會遇到過，網上也有很多外掛可使用。但當時想著就是簡單的校驗，沒必要引外掛，就自己寫一個簡單的函式。隨著校驗的需求多樣化，函式越來越大。有點輪子的雛形，算是無心插柳吧。現在也該分享出來了，和大家交流

JavaScript表單校驗

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

第11講 11.2 SpringBoot表單校驗

8， 寫studentAdd.html 方法，匯入jquery，ajax 方式提交，   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit

第11講 11.1 SpringBoot表單校驗

1，複製一個專案，改名為SpringDataValid，關閉其他專案， 以防干擾。右鍵專案，Maven，Update Project...   2，新建一個數據庫，db_studentinfo,修改配置檔案裡的資料庫連線。 server:  

jQuery - 函式遍歷及validation外掛使用(表單校驗).

1.屬性操作: val , text , html val( ): 獲取value屬性的值. val(…): 給value屬性設定值.   text( ): 獲取文字內容 , 如有標籤 , 忽略不獲取. text(…):設定文字內容 , 如有標籤 , 不進行解析 .