HTML表单验证
HTML form validation
我创建了一个简单的HTML表单，它将输入作为客户的用户名。它验证它是否确实是一个有效的用户名。如果是，那么它应该转到step2.php页面，如果不是，那么它应该显示一个错误并留在原始页面上。
下面是我的HTML代码:
<form method="post" onsubmit="validateUsername();" id="myform" name="myform" action="step2.php">
Choose username: <input type="text" id="username" name="username" />
<input type="submit" value="Submit">
</form>
我正在使用一个javascript函数验证用户名:
function validateUsername()
{
var x=document.forms["myform"]["username"].value.length;
if (x < 5)
{
alert('Username too short.');
return false;
}
else
{
return true;
}
}
我的问题:
如果用户输入一个短的用户名，那么它会显示一个警告消息"用户名太短"。当我按下"OK"按钮警报消息，然后它将step2.php。理想情况下，只有当用户名被正确验证时，它才应该向step2.php发送数据。但这并没有发生。
有人能找到我代码中的bug吗?
变化:
<form method="post" onsubmit="validateUsername();" id="myform" name="myform" action="step2.php">
Choose username: <input type="text" id="username" name="username" />
<input type="submit" value="Submit">
</form>
:
<form method="post" onsubmit="return validateUsername();" id="myform" name="myform" action="step2.php">
Choose username: <input type="text" id="username" name="username" />
<input type="submit" value="Submit">
</form>
注意，添加了关键字return，如果validateUsername返回false，该关键字将取消表单提交。
试试这个。(在表单中添加返回onsubmit)
<form method="post" onsubmit="return validateUsername();" id="myform" name="myform" action="step2.php">
Choose username: <input type="text" id="username" name="username" />
<input type="submit" value="Submit">
</form>
还有另一个注意事项，请确保在步骤2中也通过php验证了这个，因为客户端验证可以很容易地绕过。
在调用函数前添加return:
onsubmit="return validateUsername();"
. .或者使用event.preventDefault():
onsubmit="if(!validateUsername()) event.preventDefault();"
首先，不要在onsubmit事件中使用return before javascript函数
<form method="post" onsubmit="validateUsername();" id="myform" name="myform" action="step2.php">
Choose username: <input type="text" id="username" name="username" />
<input type="submit" value="Submit">
javascript函数，你只需要给出一个条件如果用户名小于5个字符它不会提交表单否则它会提交表单并将数据发送到step2.php
function validateUsername()
{var x = document.myform.username.value.length;
if (x < 5)
{
alert('Username too short.');
return false;
}
}
function validation(){
var eid=$.trim($('#email').val());
var password=$.trim($('#password').val());
var emailval =/^([a-zA-Z0-9_'.'-])+'@(([a-zA-Z0-9'-])+'.)+([a-zA-Z])+/;
var con=/^'(?([0-9]{3})')?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
var errmsg='';
var c=0;
var cur_el='';
if(eid=='' || eid==null)
{
errmsg="enter your email";
cur_el=$('#email');
c=1;
}
else if (!emailval.test(eid)) {
errmsg="Please provide a valid email address (hints : daskoushik9@gmail.com)";
cur_el=$('#email');
c=1;
}
else if(password=='')
{
errmsg="enter password";
cur_el=$('#password');
c=1;
}
else if(password.length<4)
{
errmsg="password is too short";
cur_el=$('#password');
c=1;
}
if(c==1 && errmsg!=''){
alert(errmsg);
cur_el.focus();
return false;
}
else
{return true;}
}
function adminprofilevalidation(){
var ad_uname=$.trim($('#admin_username').val());
var ad_oldpass=$.trim($('#admin_passo').val());
var ad_newpass=$.trim($('#admin_pass').val());
var ad_repass=$.trim($('#admin_passc').val());
var ad_email=$.trim($('#admin_email').val());
// var eid=$.trim($('#email').val());
// var password=$.trim($('#password').val());
// var cpassword=$.trim($('#cpassword').val());
// var file=$('#file').val();
var errmsg='';
var c=0;
var cur_el='';
//var em=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+'.([a-zA-Z])+([a-zA-Z])+/;
var alphaExp = /^[a-zA-Z]+$/;
// var alphaNum = /^[0-9a-zA-Z]+$/;
// var digit = /^[0-9]+$/;
// var fdigit=/^[0]+$/;
var emailval = /^([a-zA-Z0-9_'.'-])+'@(([a-zA-Z0-9'-])+'.)+([a-zA-Z])+/;
var con=/^'(?([0-9]{2})')?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(ad_uname=='' || ad_uname==null)
{
errmsg="Enter User name";
cur_el=$('#admin_username');
c=1;
}
else if(!ad_uname.match(alphaExp)){
errmsg="Please enter only letters for your name";
cur_el=$('#firstname');
c=1;
}
else if(ad_oldpass=='' || ad_oldpass==null)
{
errmsg="enter Old password";
cur_el=$('#admin_passo');
c=1;
} else if(ad_oldpass.length<4)
{
errmsg="password is too short";
cur_el=$('#admin_passo');
c=1;
}
else if(ad_newpass=='' || ad_newpass==null)
{
errmsg="please enter new password";
cur_el=$('#admin_pass');
c=1;
}
else if(ad_newpass.length<4)
{
errmsg="password is too short";
cur_el=$('#admin_pass');
c=1;
}
else if(ad_repass=='' || ad_repass==null)
{
errmsg="please re enter the password";
cur_el=$('#admin_passc');
c=1;
}
else if(ad_repass.length<4)
{
errmsg="password is too short";
cur_el=$('#admin_passc');
c=1;
}
else if(ad_email=='' || ad_email==null)
{
errmsg="Enter your email";
cur_el=$('#admin_email');
c=1;
}
else if (!emailval.test(ad_email)) {
errmsg='Please provide a valid email address (hints : daskoushik9@gmail.com)';
cur_el=$('#admin_email');
c=1;
}
if(c==1 && errmsg!=''){
alert(errmsg);
cur_el.focus();
return false;
}
else
{return true;}
}
function companyprofilevalidation(){
var co_name=$.trim($('#company_name').val());
var co_pcntact=$.trim($('#company_contact_person').val());
var co_add=$.trim($('#company_address').val());
var co_phn=$.trim($('#company_phone').val());
var co_email=$.trim($('#company_email').val());
var errmsg='';
var c=0;
var cur_el='';
//var em=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+'.([a-zA-Z])+([a-zA-Z])+/;
var alphaExp = /^[a-zA-Z]+$/;
// var alphaNum = /^[0-9a-zA-Z]+$/;
var digit = /^[0-9]+$/;
var fdigit=/^[0]+$/;
var emailval = /^([a-zA-Z0-9_'.'-])+'@(([a-zA-Z0-9'-])+'.)+([a-zA-Z])+/;
var con=/^'(?([0-9]{2})')?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(co_name=='' || co_name==null)
{
errmsg="Enter Company name";
cur_el=$('#company_name');
c=1;
}
else if(co_pcntact=='' || co_pcntact==null)
{
errmsg="enter Person Contact name";
cur_el=$('#company_contact_person');
c=1;
}
else if(co_add=='' || co_add==null)
{
errmsg="please enter company address";
cur_el=$('#company_address');
c=1;
}
else if(co_phn=='' || co_phn==null)
{
errmsg="please enter company phone no";
cur_el=$('#company_phone');
c=1;
}
else if(fdigit.test(co_phn)){
errmsg="first digit must be non zero";
cur_el=$('#company_phone');
c=1;
}
else if(co_phn.length<10)
{
errmsg="please give 10 digit no";
cur_el=$('#company_phone');
c=1;
}
else if(co_email=='' || co_email==null)
{
errmsg="Enter your email";
cur_el=$('#company_email');
c=1;
}
else if (!emailval.test(co_email)) {
errmsg='Please provide a valid email address (hints : daskoushik9@gmail.com)';
cur_el=$('#company_email');
c=1;
}
if(c==1 && errmsg!=''){
alert(errmsg);
cur_el.focus();
return false;
}
else
{return true;}
// else if(file=='')
// {
// errmsg="upload your photo";
// cur_el=$('#uploadfile');
// c=1;
// }
// else if(fdigit.test(phone)){
// errmsg="first digit must be non zero";
// cur_el=$('#phone');
// c=1;
// }
}
function jobaddvalidation(){
var errmsg='';
var c=0;
var cur_el='';
//var em=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+'.([a-zA-Z])+([a-zA-Z])+/;
var alphaExp = /^[a-zA-Z]+$/;
// var alphaNum = /^[0-9a-zA-Z]+$/;
var digit = /^[0-9]+$/;
var fdigit=/^[0]+$/;
var emailval = /^([a-zA-Z0-9_'.'-])+'@(([a-zA-Z0-9'-])+'.)+([a-zA-Z])+/;
var con=/^'(?([0-9]{2})')?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
var jtitle=$.trim($('#job_title').val());
var jsummery=$.trim($('#job_summery').val());
// var jdescription=$.trim($('#job_description').val());
var cid=$.trim($('#category_id').val());
var jreq=$.trim($('#job_requirements').val());
var jcdetails=$.trim($('#job_contact_details').val());
var jcpname=$.trim($('#job_contact_person_name').val());
var jcpemail=$.trim($('#job_contact_person_email').val());
var jacdetails=$.trim($('#job_additional_contact_details').val());
var jscopy='';
if(document.form1.job_scan_copy.checked){
jscopy=$.trim($('#job_scan_copy').val());
}
var jnscopy='';
jnscopy=$.trim($('#job_no_scan_copy').val());
var jloc=$.trim($('#job_location').val());
var jctc=$.trim($('#job_ctc').val());
var jureq=$.trim($('#job_upload_requirement').val());
if(jtitle==null || jtitle=='')
{
errmsg="please give job title";
cur_el=$('#job_title');
c=1;
}else if(jsummery==null || jsummery=='')
{
errmsg="please give job summery ";
cur_el=$('#job_summery');
c=1;
}
// else if(jdescription==null || jdescription=='')
// {
// errmsg="please mention job description";
// cur_el=$('#job_description');
// c=1;
// }
else if(cid==null || cid=='')
{
errmsg="please give category name";
cur_el=$('#category_id');
c=1;
}else if(jreq==null || jreq=='')
{
errmsg="please give job requirement";
cur_el=$('#job_requirements');
c=1;
}
else if(jcdetails==null || jcdetails=='')
{
errmsg="please give job contact details";
cur_el=$('#job_contact_details');
c=1;
}else if(jcpname==null || jcpname=='')
{
errmsg="please give job contact person name";
cur_el=$('#job_contact_person_name');
c=1;
}else if(jcpemail==null || jcpemail=='')
{
errmsg="please give job contact person email";
cur_el=$('#job_contact_person_email');
c=1;
}else if(!emailval.test(jcpemail))
{
errmsg="please give valid job contact person email";
cur_el=$('#job_contact_person_email');
c=1;
}else if(jacdetails==null || jacdetails=='')
{
errmsg="please give job additional contact details";
cur_el=$('#job_additional_contact_details');
c=1;
}else if((jscopy!='' && jnscopy=='') || (jscopy=='' && jnscopy!=''))
{
errmsg="please give both scan copy and no scan copy OR both un select";
cur_el=$('#job_scan_copy');
c=1;
}else if(jloc==null || jloc=='')
{
errmsg="please mention job location";
cur_el=$('#job_location');
c=1;
}else if(jctc==null || jctc=='')
{
errmsg="please mention job C T C";
cur_el=$('#job_ctc');
c=1;
}
if(c==1 && errmsg!=''){
alert(errmsg);
cur_el.focus();
return false;
}
else
{return true;}
}
相关文章：
- JAVASCRIPT验证表单中的日期
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 如何使用jQuery正确验证表单
- Javascript不会验证表单
- 如何使用javascript验证表单中的数据，然后调用php页面
- 包括来自另一个页面的Boostrap模态;t验证表单
- Javascript验证表单不重定向页面
- 在提交之前验证表单，jQuery发布到javaScript，然后提交到确认页面
- 引导复选框-x 选中时未正确更新 DOM - 如何验证表单
- Jquery 验证表单
- 验证表单中的 jQuery-UI 微调器
- 在 Jquery 中验证表单的输入字段
- 如何验证表单控制数据大小不超过2.5 mb
- 在表单进入Angular中的ng-submit之前验证表单
- Javascript表单验证:表单在错误返回时提交:
- 使用Angular.js验证表单输入的原始状态
- 正在复制验证表单
- 如何在转盘中逐步(3步）验证表单
- 使用javascript验证表单值
- 验证表单按id输入val
