jQuery正規表現に基づくフォーム検証機能例
本明細書の例は、JQueryの正規表現に基づくフォーム検証機能を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
ウェブサイトのトップページフォームjs：
JavaScript正規表現はオンラインテストツールです。
http://tools.jb51.net/regex/javascript
正規表現のオンライン作成ツール:
http://tools.jb51.net/regex/create_reg
jQueryに関する詳細は、当駅のテーマを見ることができます。「jQuery正規表現の使い方のまとめ」、「jQuery文字列操作テクニックのまとめ」、「jQuery操作xmlテクニックまとめ」、「jQuery拡張テクニックのまとめ」、「jqueryセレクタの使い方のまとめ」、「jQuery常用プラグインと使い方のまとめ」
ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" >
function validata(){
if($("#username").val()==""){
alert(" ");
return false;
}
if($("#password").val()==""){
alert(" ");
return false;
}
if($("#telephone").val()==""){
alert(" ");
}
if($("#email").val()==""){
$("#email").val("[email protected]");
}
}
function isInteger(obj){
reg=/^[-+]?\d+$/;
if(!reg.test(obj)){
$("#test").html("<b>Please input correct figures</b>");
}else{
$("#test").html("");
}
}
function isEmail(obj){
reg=/^\w{3,}@\w+(\.\w+)+$/;
if(!reg.test(obj)){
$("#test").html("<b> </b>");
}else{
$("#test").html("");
}
}
function isString(obj){
reg=/^[a-z,A-Z]+$/;
if(!reg.test(obj)){
$("#test").html("<b> </b>");
}else{
$("#test").html("");
}
}
function isTelephone(obj){
reg=/^(\d{3,4}\-)?[1-9]\d{6,7}$/;
if(!reg.test(obj)){
$("#test").html("<b> ！</b>");
}else{
$("#test").html("");
}
}
function isMobile(obj){
reg=/^(\+\d{2,3}\-)?\d{11}$/;
if(!reg.test(obj)){
$("#test").html(" ");
}else{
$("#test").html("");
}
}
function isUri(obj){
reg=/^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
if(!reg.test(obj)){
$("#test").html($("#uri").val()+" inernet ");
}else{
$("#test").html("");
}
}
//document
$(document).ready(function() {
// do something here
//
$("p").each(function(i){
this.style.color=['red','green','blue','black'][i%2]
});
//eq(2) $("p") 3
$("p").eq(2).click(function(){$("#display").css("color","blue")});
// test p "over"。
$("#test>p").addClass("over");
//test p "out"。
$("#test p:last").addClass("out");
//
//$('#faq').find('dd').hide().end().find('dt').click(function()
//
$("a").hover(
function(){$(this).parents("p").addClass("out")},
function(){$(this).parents("p").removeClass("out")})
//hover ，toggle ,
//trigger(eventtype): ,
//bind(eventtype,fn)，unbind(eventtype): （ ） 。
//
$("#display").hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass("over");
})
.click(function(){alert($("#display").text())});
if($.browser.msie){// ， ie
//
$("input[@type=text],textarea,input[@type=password]")
.focus(function(){$(this).css({background:"white",border:"1px solid blue"})})
// ,
//.blur(function(){$(this).css({background:"white",border:"1px solid black"})})
//
//css addClass()
$("input[@type=text],textarea,input[@type=password]")
.blur(function(){$(this).css({background:"white",border:"1px solid black"});});
}
});
</script>
<style type="text/css">
.over{
font-size:large;
font-style:italic;
}
.out{
font-size:small;
}
</style>
</head>
<body >
<div id="display">demo</div>
<div id="test">
<p>adfa<a>dfasfa</a>sdfasdf</p>
<p>adfadfasfasdfasdf</p>
<p>adfadfasfasdfasdf</p>
<p>adfadfasfasdfasdf</p>
</div>
<form id="theForm">
isString<div><input type="text" id="username" onblur="isString(this.value)"/></div>
isInteger<div><input type="text" id="password" onblur="isInteger(this.value)"/></div>
isTelephone<div><input type="text" id="telephone" onblur="isTelephone(this.value)"/></div>
isMobile<div><input type="text" id="mobile" onblur="isMobile(this.value)"/></div>
isEmail<div><input type="text" id="email" onblur="isEmail(this.value)"/></div>
isUri<div><input type="text" id="uri" onblur="isUri(this.value)"/></div>
<div><input type="button" value="Validata" onclick="return validata();" /></div>
</form>
</body>
</html>
ウェブサイトのトップページフォームjs：
function checkVaild()
{
var User=$("#Mobile").val();
var reg=/^(\+\d{2,3}\-)?\d{11}$/;
if (User=="")
{
alert(" ") ;
return false;
}
if(!reg.test(User)){
alert(" ") ;
return false ;
}
return true ;
}
function doValidate(value)
{
vkeyWords=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]{1}[^`~!@$%^&()+=|\\\][\]\{\}:;'\,.<>?]{0,19}$/;
if(value==null || value=="")
{
alert(" ");
return false;
}
if(!vkeyWords.test(value))
{
alert(" , !");
return false;
}
return true;
}
JavaScript正規表現はオンラインテストツールです。
http://tools.jb51.net/regex/javascript
正規表現のオンライン作成ツール:
http://tools.jb51.net/regex/create_reg
jQueryに関する詳細は、当駅のテーマを見ることができます。「jQuery正規表現の使い方のまとめ」、「jQuery文字列操作テクニックのまとめ」、「jQuery操作xmlテクニックまとめ」、「jQuery拡張テクニックのまとめ」、「jqueryセレクタの使い方のまとめ」、「jQuery常用プラグインと使い方のまとめ」
ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます。