이 글에서는 폼 검증 제출 을 구현하기 위한 jQuery의 구체적인 방법을 주로 자세히 소개합니다.
이전 글 [jQuery 폼 검증 제출: 프론트엔드 검증 ]에서는 폼 검증 제출을 구현하기 위한 jQuery의 구체적인 메소드 코드를 간략하게 나열했습니다. 따라서 이 섹션에서는 양식 확인 제출을 구현하기 위한 jQuery의 구체적인 방법을 자세히 소개합니다.
주요 코드 예시는 다음과 같습니다.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery用户注册表单验证代码</title>
<link href="css/jq22.css" rel="stylesheet" type="text/css"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script language='javascript' src="js/jq22.js"></script>
</head>
<body>
<div class='body_main'>
<div class='index_box' style='margin-top:20px;'>
<div style="position:fixed;color:red;margin:70px 0 0 450px;font-size:16px;Z-index:100;display:block;"
id="hint"></div>
<div class='box_title'>
<div class='text_content'>
<h1>jQuery用户注册表单验证代码</h1>
</div>
</div>
<div class='box_main'>
<div id="register" class="register">
<form id="form" action="check1.php" method="post" onSubmit="return check();">
<div id="form_submit" class="form_submit">
<div class="fieldset">
<div class="field-group">
<label class="required title">手机号码</label>
<span class="control-group" id="mobile_input">
<div class="input_add_long_background">
<input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value=""
onblur="__changeUserName('mobile');">
</div>
</span>
<label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>
</div>
<div class="field-group">
<label class="required title">邮箱</label>
<span class="control-group" id="email_input">
<div class="input_add_long_background">
<input class="register_input" type="text" id="email" name="email" maxLength="50" value=""
onblur="__changeUserName('email');">
</div>
</span>
<label class="tips">请输入您常用的邮箱</label>
</div>
<div class="field-group">
<label class="required title">设置密码</label>
<span class="control-group" id="password1_input">
<div class="input_add_long_background">
<input class="register_input" type="password" id="password1" name="password1" maxLength="20" value=""
onblur="checkPwd1(this.value);"/>
</div>
</span>
<label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label>
</div>
<div class="field-group">
<label class="required title">确认密码</label>
<span class="control-group" id="password2_input">
<div class="input_add_long_background">
<input class="register_input" type="password" id="password2" name="password2" maxLength="20" value=""
onblur="checkPwd2(this.value);"/>
</div>
</span>
<label class="tips">请输入确认密码，要和上面的密码一致</label>
</div>
</div>
</div>
<div id="div_submit" class="div_submit">
<div class='div_submit_button'>
<input id="submit" type="submit" value="注册" class='button_button disabled'>
</div>
</div>
</form>
</div>
<script type="text/javascript">
function __changeUserName(of) {
var username = $('#' + of).val();
if (of == 'email') {
if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
showTooltips('email_input', '请输入正确的Email地址');
return;
}
}
else {
if (username == '' || !isMobilePhone(username)) {
showTooltips('mobile_input', '请输入正确的手机号码');
return;
}
}
}
function checkPwd1(pwd1) {
if (pwd1.search(/^.{6,20}$/) == -1) {
showTooltips('password1_input', '密码为空或位数太少');
} else {
hideTooltips('password1_input');
}
}
function checkPwd2(pwd2) {
var pas1 = $('#password1').val();
if (pwd2.search(/^.{6,20}$/) == -1) {
showTooltips('password2_input', '密码为空或位数太少');
}
if (pwd2 != pas1) {
showTooltips('password2_input', '两次密码不一致');
}
}
function check() {
hideAllTooltips();
var ckh_result = true;
// if ($('#email').val() == '' || !isEmail($('#email').val())) {
// showTooltips('email_input', '请输入正确的Email地址');
// ckh_result = false;
// }
if ($('#password1').val() == '') {
showTooltips('password1_input', '密码不能为空');
ckh_result = false;
}
if ($('#password2').val() == '') {
showTooltips('password2_input', '确认密码不能为空');
ckh_result = false;
}
if ($('#password2').val() != $('#password1').val()) {
showTooltips('password2_input', '两次密码不一致');
ckh_result = false;
}
if ($('#mobile').val() == '' || !isMobilePhone($('#mobile').val())) {
showTooltips('mobile_input', '手机号码不正确');
ckh_result = false;
}
return ckh_result;
}
function isMobilePhone(value) {
if (value.search(/^(\+\d{2,3})?\d{11}$/) == -1) {
return false;
}
else
return true;
}
function isEmail(value) {
if (value.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
return false;
}
else
return true;
}
</script>
</div>
<div class='box_bottom'></div>
</div>
</div>
</body>
</html>위 코드에서는 단순히 프론트엔드 데이터 check1.php에 제출합니다. 제출 방법은 post이며, 양식에 클릭 이벤트를 제공합니다.
제출을 클릭하면 일련의 정보 판단이 이루어집니다. 그리고 클릭하여 등록하지 않을 때, 즉 클릭 이벤트가 발생하지 않을 때에도 판단이 있을 것입니다.
코드의 __changeUserName 메소드와 같이 이 메소드에서는 먼저 정규식을 사용하여 이메일 형식이 올바른지, 휴대폰 번호가 올바른지 확인합니다. 그리고 checkPwd1 및 checkPwd2 메소드에서 비밀번호가 요구 사항을 충족하고 첫 번째 비밀번호와 동일한지 확인합니다. 이러한 방법은 모두 등록 버튼을 클릭하지 않았을 때 발생하는 확인입니다.
물론 이러한 판단만으로는 부족하기 때문에 위 코드의 확인 방법 등 등록을 클릭할 때 발생하는 확인을 작성해야 하며, 이를 판단하는 방법은 다음과 같습니다. 각 필드(백그라운드에서 필요한 필드를 확인해야 함)
위의 등록 클릭 인증 방법 외에도 등록 클릭 버튼에 이벤트를 바인딩하여 인증 여부를 결정할 수도 있습니다. 여기서는 자세히 설명하지 않겠습니다.
관련된 js 및 css 코드는 이전 글 [jQuery 양식 확인 제출: 프론트 엔드 확인 1]에서 확인할 수 있습니다. 에게.
이 글은 jQuery의 양식 확인 제출 구현 방법 에 관한 것입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!
프론트엔드 관련 지식을 더 알고 싶다면 PHP 중국어 홈페이지를 따라가시면 됩니다. jQuery Video Tutorial, JavaScript Video Tutorial , BootstrapTutorial 및 기타 관련 비디오 튜토리얼을 참조하고 학습하는 모든 분들을 환영합니다!
위 내용은 jQuery 양식 검증 제출: 프론트엔드 검증 2(이미지, 텍스트 + 비디오)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
