그누용 jQuery 폼검사 정보
그누용 jQuery 폼검사본문
그누보드용 jquery 폼유효성 검사입니다.
좋은 플러그인이 있지만 공부도 할겸 간단하게 구현해보았습니다.
1. sample.html
<script type="text/javascript" src="config.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.g4.js" charset="utf-8"></script>
<form method="post" action="sample.exe.php" onsubmit="return $.g4.validate(this);">
<p>이름</p>
<p><input type="text" name="name" title="이름" class="required" /></p>
<p>이메일</p>
<p><input type="text" name="email" title="이메일" class="required email" /></p>
<p><input type="submit" name="button" value="전송하기" /></p>
</form>
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.g4.js" charset="utf-8"></script>
<form method="post" action="sample.exe.php" onsubmit="return $.g4.validate(this);">
<p>이름</p>
<p><input type="text" name="name" title="이름" class="required" /></p>
<p>이메일</p>
<p><input type="text" name="email" title="이메일" class="required email" /></p>
<p><input type="submit" name="button" value="전송하기" /></p>
</form>
2. congif.js
var messages = {};
var functions = {};
var functions = {};
messages['required'] = ' : 필수항목입니다.';
functions['required'] = function(value){return /[^\s\t\r\n]+/.test(value);};
functions['required'] = function(value){return /[^\s\t\r\n]+/.test(value);};
messages['email'] = ' : 올바르지 못한 메일형식입니다.';
functions['email'] = function(value){return !value || /^[0-9a-z\-\_]+\@[0-9a-z\-\.]+\.[a-z]{2,4}$/i.test(value);};
functions['email'] = function(value){return !value || /^[0-9a-z\-\_]+\@[0-9a-z\-\.]+\.[a-z]{2,4}$/i.test(value);};
messages['phone'] = '전화번호 입력오류시 출력메시지';
functions['phone'] = function(value){
/**전화번호 유효성검사 함수**/
};
functions['phone'] = function(value){
/**전화번호 유효성검사 함수**/
};
.. 계속 추가합니다. 이 부분은 여러분들의 몫입니다ㅠㅠ ..
3. jquery.g4.js
jQuery.g4 = {
validate: function(form)
{
var $result = true;
$(form).find('input, select, textarea').each(function(){
var $element = $(this);
$.each($element.attr('class').split(' '), function(){
if(this && functions[this] && functions[this]($element.attr('value')) == false)
{
alert($element.attr('title') + messages[this]);
$element.focus();
$result = false;
return $result;
}
});
return $result;
});
return $result;
}
};
validate: function(form)
{
var $result = true;
$(form).find('input, select, textarea').each(function(){
var $element = $(this);
$.each($element.attr('class').split(' '), function(){
if(this && functions[this] && functions[this]($element.attr('value')) == false)
{
alert($element.attr('title') + messages[this]);
$element.focus();
$result = false;
return $result;
}
});
return $result;
});
return $result;
}
};
ㅋㅋ 더 매진하여 담에 더 좋은 팁을 올려볼께요;;;
추천
4
4
댓글 5개
많은 도움 되었습니다. ^^b
wrest.js 를 변형해 보았습니다.
누락된 코드가 있지만 실행에는 문제가 없습니다.
<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<script src="inc/jquery.js"></script>
<BODY>
<?=date("Y-m-d H:i:s");?>
<form name="form1" action="./form.php" onsubmit="return form1_submit(this);">
<input type='text' name='a' title='이름' class='required'>
<input type='submit' value='form1'>
</form>
<form name="form2" onsubmit="return false">
<input type='text' name='b' class='required'>
<input type='submit' value='form2'>
</form>
<div id="msg"></div>
<script>
function form1_submit(f) {
alert("onsubmit "+f.name);
return true;
}
$(document).ready(function() {
var wrest_msg;
var wrest_fld;
// title 속성값을 얻어 return, 없으면 tag의 name을 넘김
var ffieldname = function(fld) {
return fld.getAttribute('title') ? fld.getAttribute('title') : fld.name;
}
var ftrim = function(fld) {
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
fld.value = fld.value.replace(pattern, '');
return fld.value;
}
// 필수 입력 검사
var frequired = function(fld) {
if (ftrim(fld)) return;
if (wrest_fld == null) {
// 셀렉트박스일 경우에도 필수 선택 검사합니다.
wrest_msg = ffieldname(fld) + " : 필수 "+(fld.type=="select-one"?"선택":"입력")+"입니다.\n";
wrest_fld = fld;
}
}
var wrest_submit = function() {
wrest_msg = "";
wrest_fld = null;
for (var i=0; i<this.elements.length; i++) {
var fld = this.elements[i];
//if (typeof(fld) == 'undefined') return;
var class_name = fld.getAttribute('className') != null ? fld.getAttribute('className') : fld.getAttribute('class');
if (class_name == null) return;
var opt = class_name.split(' ');
for (i=0;i<opt.length;i++) {
var str = opt[i].toLowerCase();
//alert(str);
switch (str) {
case 'trim' : ftrim(fld); break;
case 'required' : frequired(fld); break;
case 'alpha' : falpha(fld); break;
case 'alnum' : falnum(fld); break;
case 'alnumunder' : falnumunder(fld); break;
case 'numeric' : fnumeric(fld); break;
case 'email' : femail(fld); break;
case 'hangul' : fhangul(fld); break;
case 'hangul2' : fhangul2(fld); break;
case 'checkon' : fcheckon(fld); break;
case 'checkoff' : fcheckoff(fld); break;
default :
// css 가 minlength_ 로 시작한다면 _ 뒤의 숫자는 최소길이값
if (/^minlength_/.test(str)) {
var s = str.split('_');
fminlength(fld, s[1]);
}
}
}
}
// 필드가 null 이 아니라면 오류메세지 출력후 포.커스를 해당 오류 필드로 옮김
// 오류 필드는 배경색상을 바꾼다.
if (wrest_fld != null) {
alert(wrest_msg);
if (wrest_fld.style.display != 'none') {
//wrest_fld.style.backgroundColor = wrest_fldBackColor;
wrest_fld.focus();
}
return false;
}
//alert("wrest_submit " + this.name);
if (this.old_submit && this.old_submit()==false)
return false;
return true;
}
$("form").each(function(i) {
//alert($(this).get(0).name);
var $form = $(this);
var f = $form[0];
/*
var s = "";
for (i in $form[0]) {
s += i + "<br/>";
}
$("#msg").html(s);
//alert($form.onsubmit);
*/
/*
$form.bind("submit", function() {
alert(this.name);
});
*/
if (f.onsubmit) f.old_submit = f.onsubmit;
f.onsubmit = wrest_submit;
for (var k=0; k<f.elements.length; k++) {
// 필수 입력일 경우는 * 배경이미지를 준다.
var el = f.elements[k];
if (el.getAttribute("required") != null) {
el.style.backgroundImage = "url(js/wrest.gif)";
el.style.backgroundPosition = "top right";
el.style.backgroundRepeat = "no-repeat";
}
}
});
});
</script>
</BODY>
</HTML>
누락된 코드가 있지만 실행에는 문제가 없습니다.
<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<script src="inc/jquery.js"></script>
<BODY>
<?=date("Y-m-d H:i:s");?>
<form name="form1" action="./form.php" onsubmit="return form1_submit(this);">
<input type='text' name='a' title='이름' class='required'>
<input type='submit' value='form1'>
</form>
<form name="form2" onsubmit="return false">
<input type='text' name='b' class='required'>
<input type='submit' value='form2'>
</form>
<div id="msg"></div>
<script>
function form1_submit(f) {
alert("onsubmit "+f.name);
return true;
}
$(document).ready(function() {
var wrest_msg;
var wrest_fld;
// title 속성값을 얻어 return, 없으면 tag의 name을 넘김
var ffieldname = function(fld) {
return fld.getAttribute('title') ? fld.getAttribute('title') : fld.name;
}
var ftrim = function(fld) {
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
fld.value = fld.value.replace(pattern, '');
return fld.value;
}
// 필수 입력 검사
var frequired = function(fld) {
if (ftrim(fld)) return;
if (wrest_fld == null) {
// 셀렉트박스일 경우에도 필수 선택 검사합니다.
wrest_msg = ffieldname(fld) + " : 필수 "+(fld.type=="select-one"?"선택":"입력")+"입니다.\n";
wrest_fld = fld;
}
}
var wrest_submit = function() {
wrest_msg = "";
wrest_fld = null;
for (var i=0; i<this.elements.length; i++) {
var fld = this.elements[i];
//if (typeof(fld) == 'undefined') return;
var class_name = fld.getAttribute('className') != null ? fld.getAttribute('className') : fld.getAttribute('class');
if (class_name == null) return;
var opt = class_name.split(' ');
for (i=0;i<opt.length;i++) {
var str = opt[i].toLowerCase();
//alert(str);
switch (str) {
case 'trim' : ftrim(fld); break;
case 'required' : frequired(fld); break;
case 'alpha' : falpha(fld); break;
case 'alnum' : falnum(fld); break;
case 'alnumunder' : falnumunder(fld); break;
case 'numeric' : fnumeric(fld); break;
case 'email' : femail(fld); break;
case 'hangul' : fhangul(fld); break;
case 'hangul2' : fhangul2(fld); break;
case 'checkon' : fcheckon(fld); break;
case 'checkoff' : fcheckoff(fld); break;
default :
// css 가 minlength_ 로 시작한다면 _ 뒤의 숫자는 최소길이값
if (/^minlength_/.test(str)) {
var s = str.split('_');
fminlength(fld, s[1]);
}
}
}
}
// 필드가 null 이 아니라면 오류메세지 출력후 포.커스를 해당 오류 필드로 옮김
// 오류 필드는 배경색상을 바꾼다.
if (wrest_fld != null) {
alert(wrest_msg);
if (wrest_fld.style.display != 'none') {
//wrest_fld.style.backgroundColor = wrest_fldBackColor;
wrest_fld.focus();
}
return false;
}
//alert("wrest_submit " + this.name);
if (this.old_submit && this.old_submit()==false)
return false;
return true;
}
$("form").each(function(i) {
//alert($(this).get(0).name);
var $form = $(this);
var f = $form[0];
/*
var s = "";
for (i in $form[0]) {
s += i + "<br/>";
}
$("#msg").html(s);
//alert($form.onsubmit);
*/
/*
$form.bind("submit", function() {
alert(this.name);
});
*/
if (f.onsubmit) f.old_submit = f.onsubmit;
f.onsubmit = wrest_submit;
for (var k=0; k<f.elements.length; k++) {
// 필수 입력일 경우는 * 배경이미지를 준다.
var el = f.elements[k];
if (el.getAttribute("required") != null) {
el.style.backgroundImage = "url(js/wrest.gif)";
el.style.backgroundPosition = "top right";
el.style.backgroundRepeat = "no-repeat";
}
}
});
});
</script>
</BODY>
</HTML>
변형한것을 사용려면 모든 required 를 class로 묶어야 되겠군요. ㅡ_
rtrt
좋은 팁 감사드립니다~ ^^
