/**
* 自然数チェック
* @param v チェック対処の値
* @returns {Boolean} true:はい false:いいえ
*/
function checkNaturalNo(v) {
var flg=false;
if(v.match(/^[0-9]*$/)){
flg=true;
}
return flg;
}
var res = "あいうえお9aabbc123".match('/\\d{2}$/');
if(res){
console.log(res[0]); // → 23
console.log(res['index']); // → 17 (先頭からの位置。先頭は0で、全角は2とカウント)
}
ソースコード
$(function(){
var str='http://localhost/';
if(/:\/\//.test(str)){
console.log('URLです');
}else{
console.log('URLでありません');
}
});
コンソール出力
URLです
// 半角英数字チェック
var pw_text = "abcd1234";
//var res = pw_text.match(/^[a-zA-Z0-9]+$/);
var res = pw_text.match(/^(?=.*?[a-zA-Z])(?=.*?\d)[a-zA-Z\d]{8,100}$/);
if(res==null){
res = false;
}else{
res = true;
}
console.log(res);
var res = pw_text.match(/^[a-zA-Z\d]{8,32}$/);
var pwValidK = new PwValidK();
var pw_text = "abCD1234あいうえお";
var res = pwValidK.check(pw_text);
console.log(res); // → {check: false, err_msg: "パスワードは半角英数字で入力してください。"}
jquery_validate_js.js
$(()=>{
// 標準エラーメッセージの変更
$.extend($.validator.messages, {
email: '正しいメールアドレスの形式で入力して下さい',
required: '入力必須です',
phone: "正しい電話番号の形式で入力してください",
});
// 独自ルールを追加
jQuery.validator.addMethod("katakana", function(value, element) {
return this.optional(element) || /^([ァ-ヶー]+)$/.test(value);
}, "全角カタカナを入力してください"
);
jQuery.validator.addMethod("kana", function(value, element) {
return this.optional(element) || /^([ァ-ヶーぁ-ん]+)$/.test(value);
}, "全角ひらがな･カタカナを入力してください"
);
jQuery.validator.addMethod("hiragana", function(value, element) {
return this.optional(element) || /^([ぁ-ん]+)$/.test(value);
}, "全角ひらがなを入力してください"
);
jQuery.validator.addMethod("phone", function(value, element) {
return this.optional(element) || /^[0-9+-]*$/.test(value);
}, "正しい電話番号を入力してください"
);
jQuery.validator.addMethod("postcode", function(value, element) {
return this.optional(element) || /^¥d{3}¥-?¥d{4}$/.test(value);
}, "郵便番号を入力してください（例:123-4567）"
);
jQuery.validator.addMethod("password_strength", function(value, element) {
return this.optional(element) || /^(?=.*?[a-z])(?=.*?¥d)[a-z¥d]{6,100}$/.test(value);
}, "英数字を組み合わせたパスワードを入力してください"
);
// 入力ルールの定義
var rules = {
'last_name': {required: true, maxlength: 50},
'first_name': {required: true, maxlength: 50},
'last_name_kana': {required: true, katakana: true, maxlength: 50},
'first_name_kana': {required: true, katakana: true, maxlength: 50},
'email': {required: true, email: true},
'password': {required: true, minlength: 8, maxlength: 100, password_strength: true},
'password_confirm': {equalTo: '[name=password]' },
'tel': {required: true, phone: true},
'post_code': {postcode: true},
'address': {maxlength: 100},
'gender': {required: true},
'birthday': {date: true},
'interests[]': {required: true},
'plan': {required: true},
};
// 入力項目ごとのエラーメッセージ定義
var messages = {
'last_name': {
required: "「氏」を入力してください"
},
'first_name': {
required: "「名」を入力してください"
},
'interests[]': {
required: "いずれかを選択してください"
},
password: {
required: 'パスワードを入力してください',
minlength: 'パスワードは8文字以上で入力してください',
},
password_confirm: {
required: '確認のため再度入力してください',
equalTo: '同じパスワードをもう一度入力してください。'
}
};
$('#form1').validate({
rules: rules,
messages: messages,
//エラーメッセージ出力箇所を調整
errorPlacement: function(error, element){
if (element.is(':radio')) {
error.appendTo(element.parent());
}else if (element.is(':checkbox')) {
error.appendTo(element.parent());
}else {
error.insertAfter(element);
}
}
});
});
function checkValid(){
$res = $('#form1').valid();
console.log($res);// true:すべてOK, false:一つ以上のエラーあり
}
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="google" content="notranslate" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>バリデーション | jquery.validate.js | ワクガンス</title>
<link rel='shortcut icon' href='/home/images/favicon.ico' />
<link href="/note_prg/css/bootstrap.min.css" rel="stylesheet">
<script src="/note_prg/js/jquery3.js"></script> <!-- jquery-3.3.1.min.js -->
<script src="/note_prg/js/bootstrap.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="jquery_validate_js.js"></script>
<style>
#form1 .inp_w{
margin-bottom:10px;
}
#form1 label{
display:inline-block;
width:170px;
}
#form1 label.error{
color:red;
font-size:0.8em;
width:auto;
}
#form1.hosoku{
color:#636363;
font-size:0.75em;
}
</style>
</head>
<body>
<div id="header" ><h1>バリデーション | jquery.validate.js | ワクガンス</h1></div>
<div class="container">
<h2>Demo</h2>
<form id="form1">
<div class="inp_w">
<label for="last_name">氏名</label>
<input name="last_name" type="text" value="" placeholder="山田" />
<input name="first_name" type="text" value="" placeholder="太郎" />
</div>
<div class="inp_w">
<label for="last_name_kana">カタカナ氏名</label>
<input name="last_name_kana" type="text" value="" placeholder="ヤマダ" />
<input name="first_name_kana" type="text" value="" placeholder="タロウ" />
</div>
<div class="inp_w">
<label for="email">Eメール</label>
<input name="email" type="text" value="" placeholder="example@example.com" />
</div>
<div class="inp_w">
<label for="password" style="vertical-align:top">パスワード</label>
<div style="display:inline-block">
<input type="password" name="password" class="password" placeholder="パスワード"/><br>
<input type="password" name="password_confirm" class="password" placeholder="パスワード(もう一度)" />
</div>
<br>
</div>
<div class="inp_w">
<label for="tel">電話番号</label>
<input name="tel" type="text" value="" placeholder="090-0123-4567" />
<span class="hosoku"> 国際電話番号形式の入力可 +81-90-0123-4567</span>
</div>
<div class="inp_w">
<label for="post_code">郵便番号</label>
<input name="post_code" type="text" value="" placeholder="123-4567" style="width:8em"/>
</div>
<div class="inp_w">
<label for="address">住所</label>
<input name="address" type="text" value="" placeholder="東京都千代田区千代田〇〇1-2-3" style="width:50%"/>
</div>
<div class="inp_w">
<label for="gender">性別</label>
<div style='display:inline-block'>
<input name="gender" type="radio" value="man" />男姓
<input name="gender" type="radio" value="woman" />女姓
</div>
</div>
<div class="inp_w">
<label for="gender">生年月日</label>
<input type="date" name="birthday" value="1970-1-1" min="1900-1-1" max="2100-12-31">
</div>
<div class="inp_w">
<label for="interests[]">興味あるもの</label>
<div style='display:inline-block'>
<input type="checkbox" name="interests[]" value="fishing">釣り
<input type="checkbox" name="interests[]" value="climbing">登山
<input type="checkbox" name="interests[]" value="cook">料理
<input type="checkbox" name="interests[]" value="game">ゲーム
<input type="checkbox" name="interests[]" value="other">その他
</div>
</div>
<div class="inp_w">
<label for="plan">プラン</label>
<select name="plan">
<option value=""> -- プランを選択 -- </option>
<option value="1">猫観光ツアープラン</option>
<option value="2">登山ガイド</option>
<option value="3">遺跡ツアー</option>
<option value="4">食べ歩きツアー</option>
</select>
</div>
<input type="button" value="入力チェック" onclick="checkValid()" class="btn btn-success"/>
</form>
</body>
</html>