如何使用Javascript正确验证此表单
How to validate this form correctly using Javascript?
我有一个类似的javascript表单:
<form id="loginForm" name="loginForm" action="/create_session/" method="post">{% csrf_token %}
<table border="0" cellpadding="0" cellspacing="0" id="id-form">
<tr>
<th valign="top"></th>
<td>
<div class="error_main">
<p style="color: #009900; font-size: 13px; font-weight: bold;"><span style="color:red;">{{ server_error }}</span> {{ connec_ok }}{{ successful }}</p>
</div>
</td>
<td></td>
</tr>
<tr>
<th valign="top">Session Name :</th>
<td>
<input id="session_name" {{ disabled }} value="{{ session_name }}" name="session_name" class="inp-form" type="text" onchange="validateSessionName()" />
</td>
<td id="session_error"></td>
<td></td>
</tr>
<tr>
<th valign="top">Source Server Path :</th>
<td>
<input id="server_path" {{ disabled }} value="{{ server_path }}" name="server_path" onchange="validatePath()" class="inp-form" type="text" />
</td>
<td id="path_error"><span style="color:black"><em>Eg: 10.1.1.43:/home/sachet/test_data</em></span>
</td>
<td></td>
</tr>
<tr>
<th valign="top">Source username :</th>
<td>
<input id="source_username" {{ disabled }} name="source_username" class="inp-form" type="text" onchange="validateUsername()" />
</td>
<td id="username_error"></td>
<td></td>
</tr>
<tr>
<th valign="top">Source Password :</th>
<td>
<input id="source_password" {{ disabled }} name="source_password" class="inp-form" type="password" onchange="validatePassword()" />
</td>
<td id="password_error"></td>
<td></td>
</tr>
<tr>
<th valign="top"></th>
<td>
<input name="make_default" {{ disabled }} {{ checked }} type="checkbox" id="make_default" />
<label style="font-size: 13px;" for="make_default">Make the session default</span>
</td>
</tr>
<tr>
<th> </th>
<td valign="top">
<input type="submit" name="create_session" value="Submit" id="submit" class="form-submit" />
<input type="reset" value="Reset" class="form-reset" />
<td></td>
</tr>
</table>
<!-- end id-form -->
</form>
我想对给定的表单进行两种验证。除了Make default复选框外,每个输入框都不应该为空。我希望每个字段都满足这个正则表达式:
filter = /^[A-Za-z0-9]+$/;
当用户点击Submit按钮而不填写任何值时,我想在每个字段的右侧显示所需的字段。此外,如果用户在填写表单时不满足输入字段,我想显示无效数据,因此我添加了onchange
。我已经完成了onchange部分,现在如果用户提交空表单,我想在每个字段上显示所需的字段
$(document).ready(function() {
$("#submit").click(function(){
var session_name = $("#session_name").attr("value");
var server_path = $("#server_path").attr("value");
var source_username = $("#source_username").attr("value");
var source_password = $("#source_password").attr("value");
if(session_name==''){
document.getElementById('session_error').innerHTML="Field Required!";
document.getElementById('submit').disabled=false;
}
else if(server_path==''){
document.getElementById('path_error').innerHTML="Field Required!";
document.getElementById('submit').disabled=false;
}
else if(source_username==''){
document.getElementById('username_error').innerHTML="Field Required!";
document.getElementById('submit').disabled=false;
}
else if(source_password==''){
document.getElementById('password_error').innerHTML="Field Required!";
document.getElementById('submit').disabled=false;
}
else{
return true;
}
});
});
我想建议:
- 使用
on
绑定提交事件 - 使用显示错误的功能(不重复代码)
- 不使用
document.getElementByID
(您正在使用jQuery)
所以我的代码看起来像:
$(document).ready(function() {
$("form").on("submit", function(){
var session_name = $("#session_name").val();
var server_path = $("#server_path").val();
var source_username = $("#source_username").val();
var source_password = $("#source_password").val();
if(session_name=='') displayError('#session_error');
else if(server_path=='') displayError('#path_error');
else if(source_username=='') displayError('#username_error');
else if(source_password=='') displayError('#password_error');
else return true;
});
function displayError(element){
$(element).html("Field Required!");
return false;
}
});
相关文章:
- 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