ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery Validate 検証の概要と jQuery フォーム検証のコード例
Jquery Validate 検証の概要と jQuery フォーム検証のコード例
- 不言オリジナル
- 2018-08-14 17:01:451440ブラウズ
この記事では、JQuery Validate 検証の概要と、jQuery フォーム検証のコード例を紹介します。必要な方は参考にしていただければ幸いです。
JQuery フレームワーク検証: フレームワークを検証する
JQuery 検証ルールを検証する
(1)required:true required field
(2)remote:"check.PHP" ajax メソッドを使用して check .php を呼び出す入力値を検証します
(3)email:true 正しい形式の電子メールを入力する必要があります
(4)url:true 正しい形式の URL を入力する必要があります
(5)date:true 正しい形式の日付を入力する必要があります日付を正しい形式 (ISO) で入力する必要があります。例: 2009-06-23、1998/01/22 有効性ではなく、形式のみを検証します
(7) 数値: true 有効な数値 (負の数、10 進数) を入力する必要があります
(8)digits:true 整数を入力する必要があります
(9)creditcard: 有効なクレジット カード番号を入力する必要があります
(10)equalTo:”#field” 入力値#field
(11)accept: 入力には有効なサフィックスが必要です 文字列 (アップロードされたファイルのサフィックス)
(12)maxlength:5 最大長 5 の文字列を入力してください (中国語の文字数はカウントされません) 1 文字として)
(13)minlength:10 最小長 10 の文字列を入力してください (中国語の文字は 1 文字としてカウントされます) )
(14)rangelength:[5,10] 入力値は 5 ～ 10 である必要があります" ) (漢字は 1 文字としてカウントされます)
(15)range:[5,10] 入力値は 5 から 10 の間である必要があります
(16)max:5 入力値は 5 を超えることはできません
(17)min: 10 入力値は 10 未満にすることはできません
Jquery Validate カスタム検証ルール
addMethod(name, method, message) メソッド:パラメータ名は追加されたメソッドの名前です
パラメータ メソッドは 3 つのパラメータを受け取る関数です(value, element, param) value は要素の値、element は要素自体です param
はパラメータです、addMethod を使用してビルド以外の追加が可能です たとえば、-in Validation 以外の検証メソッド用のフィールドがありますメソッドは 1 文字のみ入力でき、範囲は a ～ f です。記述メソッドは次のとおりです:
$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},”必须是一个字母,且a-f”);
用的时候,比如有个表单字段的id=”username”,则在rules 中写
username:{
af:["a","f"]
}method addMethod の最初のパラメータは、af
addMethod の 3 番目のパラメータです。 、これはカスタマイズされたエラー プロンプトです。ここでのプロンプトは次のとおりです。「文字、および a-f である必要があります。」
addMethod の 2 番目のパラメーターは関数です。これは、この検証メソッドを使用するときの書き込み方法を決定します
。 af: "a" の場合、パラメータは a のみです。 [] で複数のパラメータを使用する場合は、カンマで区切ってください
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.error{
color: red;
}
</style>
<script src="js/jquery.min.js"></script>
<!-- 导入的框架 -->
<script src="js/jquery.validate.min.js"></script>
<script>
$(function(){
$('#a').validate({
rules:{
username:{
required:true
},
password_1:{
required:true,
rangelength:[5,10],
},
password_2:{
required:true,
equalTo:'#pa'
},
sex:{
required:true
},
you:{
required:true,
email:true
},
},
messages:{
username:{
required:'字段不能为空'
},
password_1:{
required:'字段不能为空',
rangelength:'密码长度要在5到10位',
},
password_2:{
required:'字段不能为空',
equalTo:'两次密码不一样'
},
sex:{
required:'性别不能为空',
},
you:{
required:'邮箱不能为空',
email:'邮箱格式不对'
}
}
})
})
</script>
</head>
<body>
<form action="a.jsp" method="post" id="a">
请输入姓名:<input type="text" name="username" ><br>
请输入密码: <input type="password" name="password_1" id="pa"><br>
确认密码: <input type="password" name="password_2" ><br>
性别: <input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<label for="sex" generated="true"></label><br>
邮箱: <input type="text" name="you" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>2 番目のタイプは、js のブラーイベントによって記述されるフォーム検証です。 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/* form{
margin-left:400px;
} */
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
var a = b = c = d = e = f = g = false;
$("#tables").css({ "border": '1px solid blue', 'text-align': 'center' }).css("width", "800").css("height", "400px")
$('td').css({ "border": "1px solid blue" })
$("#td1").css({ 'width': '100' })
$("#td2").css({ "width": "400" })
$("#td3").css({ "width": "300" })
// 设置id a的颜色
$('span').css('color', 'red')
//登录名的验证
$("input[name='username']").blur(function () {
var va = $(this).val();
var char = va.charCodeAt(0);
//alert(va);
if (va == "") {
a = false;
// $(this).click(function(){
// $('#a').css('background','blue').css('width','100px')
// })
$('#a').html(function () {
return "值不能为空";
})
}
else if (va.length < 6) {
a = false;
$('#a').html('登录名不能少于6个字')
}
else if (!((char >= 65 && char <= 90) || (char >= 97 && char <= 122))) {
a = false;
$('#a').html('登录名的首字母只能为字母')
}
else {
a = true;
$('#a').html(function () {
return '';
})
}
})
//验证姓氏
$("input[name='xing']").blur(function () {
var xing = $(this).val();
if (xing == '') {
b = false;
$('#b').html('值不能为空')
}
else if(xing.length>6){
b=false;
$('#b').html('你的姓氏不符合要求,字符长度超过6')
}
else{
b=true;
$('#b').html(function(){
return '';
})
}
})
//验证密码
$('#password_1').blur(function(){
var va=$('#password_1').val();
if(va==''){
c=false;
$('#c').html('密码不能为空')
}
else if(va.length<8){
c=false;
$('#c').html('你的密码不足8位数不符合要求')
}
else{
c=true;
$('#c').html('');
}
})
//密码重复验证
$('#password_2').blur(function(){
//拿到本身的密码
var va1=$(this).val();
//拿到之前的密码
var va2=$('#password_1').val();
if(va1==''){
d=false;
$('#d').html('密码不能为空')
}
else if(va1!=va2){
d=false;
$('#d').html('两次密码不正确')
}
else{
d=true;
$('#d').html('')
}
})
//性别选择直接选中下下标为1的
$('input[name=sex]:eq(1)').prop('checked','checked')
$('input[name=sex]').blur(function(){
})
//年验证
$('#year').blur(function(){
//拿到年的值
var va=$(this).val();
// var v=Number(va);
//alert(va)
var s=/^[0-9]+$/;
if(va==''){
f=false;
$('#f').hmtl('年不能为空')
}
// else if(!s.test(va)){
// f=false;
// $('#f').hmtl('年只能是数字')
// }
else if(isNaN(va)){
f=false;
$('#f').html('年只能是数字')
}
else if(va.length!=4){
f=false;
$('#f').html('值必须为4位数')
}
else{
f=true;
$('#f').html('')
}
})
//天数验证
$("input[name='day']").blur(function(){
var va=$(this).val();
var t = /^(([1-9])|((1|2)[0-9])|30|31)$/;
if(va===''){
g=false;
$('#f').html('天数不能为空')
}
else if(! t.test(va)){
g=false;
$('#f').html('对不起，天数必须在 1-31 之间!')
}else{
g=true;
$('#f').html('')
}
})
$('#su').click(function(){
return a&&b&&c&&d&&f&&g
})
})
</script>
<body>
<form action="s">
<table id="tables">
<tr>
<td colspan="3">
<img src="images/d.png" alt="">
</td>
</tr>
<tr>
<td id="td1">登录名</td>
<td id="td2">
<input id="input1" type="text" name="username">
</td>
<td id="td3">
<span id="a"></span>
</td>
</tr>
<tr>
<td>姓氏</td>
<td>
<input type="text" name="xing">
</td>
<td>
<span id="b"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password_1">
</td>
<td>
<span id="c"></span>
</td>
</tr>
<tr>
<td>再次输入密码</td>
<td>
<input type="password" name="password" id="password_2">
</td>
<td>
<span id="d"></span>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女">女
</td>
<td>
<span id="e"></span>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="text" name="year" id="year">
<select name="month" id="select_1">
<option value="一月" selected>一月</option>
<option value="二月">二月</option>
<option value="三月">三月</option>
</select>
<input type="text" name="day">
</td>
<td>
<span id="f"></span>
</td>
</tr>
<tr>
<td colspan="3">
<input type="reset" value="reset">
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="提交" id="su">
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.error{
color: red;
}
</style>
<script src="js/jquery.min.js"></script>
<!-- 导入的框架 -->
<script src="js/jquery.validate.min.js"></script>
<script>
$(function(){
$('#a').validate({
rules:{
username:{
required:true
},
password_1:{
required:true,
rangelength:[5,10],
},
password_2:{
required:true,
equalTo:'#pa'
},
sex:{
required:true
},
you:{
required:true,
email:true
},
},
messages:{
username:{
required:'字段不能为空'
},
password_1:{
required:'字段不能为空',
rangelength:'密码长度要在5到10位',
},
password_2:{
required:'字段不能为空',
equalTo:'两次密码不一样'
},
sex:{
required:'性别不能为空',
},
you:{
required:'邮箱不能为空',
email:'邮箱格式不对'
}
}
})
})
</script>
</head>
<body>
<form action="a.jsp" method="post" id="a">
请输入姓名:<input type="text" name="username" ><br>
请输入密码: <input type="password" name="password_1" id="pa"><br>
确认密码: <input type="password" name="password_2" ><br>
性别: <input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<label for="sex" generated="true" class="error"></label><br>
邮箱: <input type="text" name="you" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>
関連推奨事項:
jquery validata フォーム検証デモjquery フォーム検証送信以上がJquery Validate 検証の概要と jQuery フォーム検証のコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。