以良好可靠的方式验证表单输入
Validate Form Inputs on a good and reliable way
在我工作的页面上,有很多输入表单。
我想在提交之前检查用户输入。
示例
HTML/PHP
<input type="text" name="adress" id="adress">
<input type="text" name="amount" id="amount">
实际上,我在Javascript 中执行以下操作
Javascript
function dataValidation() {
error=false;
var adress = document.getElementById('adress').value;
var amount = document.getElementById('adress').value;
if (adress == ""){
error=true;
}
if (amount >0 && amount < 999){
}
else {
error=true;
}
if (error == false){
document.forms["myForm"].submit();
}
}
所以,基本上这对我来说很好,但问题是,我必须为每个表单创建该函数,并为每个字段添加一个IF
所以,我正在寻找一个更好的解决方案
想法1:添加一个列表,提供输入类型,如
adress = not empty,
amount = >0 && <999,
然后创建一个函数,用该列表检查所有字段
想法2:直接在输入字段中添加一个标签或其他东西,它应该包含什么。然后创建一个检查所有字段的函数
是否有人知道如何做到这一点,并愿意帮助/建议我?
您可以通过jquery尝试如下:你的html:
<input type="text" name="adress" id="adress">
<input type="text" name="amount" id="amount">
<input type="button" id="check_input">
并对所有输入字段应用jquery
$("#check_input").click(function() {
$("input").each(function() {
var element = $(this);
if(element.val() == "") {
element.css("border","1px solid red");
element.attr("placeholder","Field is empty");
return false;
}
});
});
如果你有多个具有相同字段的表单,尝试从外部调用验证,除了我不知道任何其他方法之外,它会减少你的一些工作,所以让我们等待其他人回复
您可能需要考虑使用HTML5。
HTML5可以节省编写JS验证的时间。例如,要验证电子邮件地址,可以使用以下方法:
<input type="email" name="email" required />
请注意type="email"和必填项。您可以使用带有正则表达式模式的HTML5表单属性,而不是使用js进行验证。
例如,如果我想创建一个只接受一个数字和3个大写字母的输入字段,我可以很容易地使用RegEx模式:
<input type="text" pattern="[0-9][A-Z]{3}">
阅读更多关于HTML5和RegEx的内容。它可以帮助你。
相关文章:
- PHP和JS中表单验证的最佳方式
- 实现已验证用户更新状态的最佳方式,作为对系统中已更改状态的反应.(ASP.NET MVC网站)
- 实现动态表单验证 Rails 的最佳方式
- 以编程方式提交角度表单,但仍会收到 HTML5 验证错误
- 我能否以编程方式指示欧芹JS忽略验证组
- 可以通过这种方式对用户进行角色身份验证
- Asp.net.服务器端验证和客户端验证很好地协同工作的最佳方式是什么?
- 在Angular中显示表单验证错误的正确方式
- “;德比;用户身份验证的方式
- 检查身份验证的安全方式(NodeJS/Express)
- 在主干模型/视图上处理更复杂的验证逻辑(必填字段等)的最佳方式
- ajax表单验证前提交方式
- 以良好可靠的方式验证表单输入
- 检查按钮内部的类,如果它通过验证,以某种方式将其与同一按钮上的另一个类交换
- 有没有一种更优雅、可扩展的方式可以向JQuery验证自定义方法添加多个条件
- 这是验证函数接收的参数的最佳方式
- 跨域访问海康威视相机快照-需要在经典asp/javascript中以编程方式完成基本身份验证
- 实现蜜罐式验证码的最佳方式是什么?
- 以编程方式验证javascript的策略是最新的
- 如何以编程方式验证web表单的登录凭据