表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.
在表单验证中,我们通常使用如下的验证功能:
验证用户名与密码为指定格式
在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等
验证单选框所选内容
最常见的验证单选框就是验证性别
验证多选框
如验证爱好等
我们在进行表单验证时通常只会用到如下几个事件:
onsubmit(提交表单),onclick(点击事件),onfocus(焦点聚集事件),onblur(焦点离开事件)
在上述几个事件中,onsubmit()事件比较特殊,它是在我们提交表单时才会触发.这使得我们在进行表单验证时有两种主要的方式:
1.在输入完成所有表单内容后点击提交按钮统一进行验证
2.通过对每一个表单元素分别添加事件进行单独验证
首先我们使用onsubmit()与onclick()事件进行统一提交验证:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//验证账号及密码
function subForm(){
var account = document.getElementById("accId").value;
var password = document.getElementById("pswId").value;
if(account.length<5 || account.length>14){
document.getElementById("spId1").innerHTML="账号应在5-14位之间!";
return false;
}else if(password.length<=0 || password.length>12){
document.getElementById("spId2").innerHTML="密码应在0-12位之间!";
return false;
}
return true;
}
</script>
</head>
<body>
<form action="success.html" method="get" onsubmit="return subForm()">
账号<input type="text" name="account" id="accId"/>
<span id="spId1"></span><br />
密码<input type="password" name="password" id="pswId" />
<span id="spId2"></span><br />
<input type="submit" value="保存"/>
</form>
</body>
</html>
验证的效果图如下: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//验证账号及密码
window.onload=function(){
var account = document.getElementById("accId");
var password = document.getElementById("pswId");
//验证用户名,失去焦点进行验证
account.onblur=function(){
if(account.value.length<4 || account.value.length>16){
document.getElementById("spId1").innerHTML="账号应在4-16位之间!";
}
}
}
</script>
</head>
<body>
<form action="success.html" method="get">
账号<input type="text" name="account" id="accId"/>
<span id="spId1"></span><br />
密码<input type="password" name="password" id="pswId" />
<span id="spId2"></span><br />
<input type="submit" value="保存"/>
</form>
</body>
</html>
接下来我们完成的展示使用注册表单进行验证
<body>
<form class="c3" method="get">
<table width="500px">
<tr class="c1">
<td >欢迎注册</td>
</tr>
<tr class="c2">
<td >用户名:<input type="text" name="account" id="accId"><span id="spaccid"></span></td>
</tr>
<tr class="c2">
<td>密码:<input type="text" name="password" id="pasId"><span id="sppasid"></span></td>
</tr>
<tr class="c2">
<td>性别:<input type="radio" name="gender" value="男" id="gendId" checked="checked">男
<input type="radio" name="gender" value="女">女
<span id="spgendId"></span>
</td>
</tr>
<tr class="c2">
<td>电话:<input type="text" ></td>
</tr>
<tr class="c2">
<td>职业:<select name="zhiye" id="zyId">
<option value="01">程序员</option>
<option value="02">教师</option>
<option value="03">公务员</option>
</select>
</td>
</tr>
<tr class="c2">
<td>爱好:<input type="checkbox" name="favorite" value="敲代码" id="fav">敲代码
<input type="checkbox" name="favorite" value="打游戏" id="fav">打游戏
<input type="checkbox" name="favorite" value="唱歌" id="fav">唱歌
<input type="checkbox" name="favorite" value="运动" accept="application/msexcel"id="fav">运动
<span id="spfavId"></span>
</td>
</tr>
<tr class="c2">
<td>地址:<textarea rows="3" cols="25" name="address"></textarea></td>
</tr>
<tr class="c1">
<td>填写完成后点击下面提交按钮提交表单</td>
</tr>
<tr class="c2">
<td><input type="button" value="提交" onclick="subForm()">
<input type="reset">
</td>
</tr>
</table>
</form>
</body><style>
*{ /* 清除浏览器的默认样式*/
margin: 0;
padding: 0;
}
.c1{
background-color: #2692ff;
color: #fff3ff;
text-align: center;
line-height: 35px;
;
}
.c3{
width: 500px;
height: 400px;
background-color: #b4daff;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 30px;
}
</style><script type="text/javascript">
function subForm(){
var account = document.getElementById("accId").value;
var password = document.getElementById("pasId").value;
var gender = document.getElementById("gendId").value;
var spgend = document.getElementById("spgendId").value;
var zhiye = document.getElementById("zyId").value;
var fav = document.getElementById("fav").value;
//验证账号和密码
if(account.length<6 || account.length>10){
document.getElementById("spaccid").innerHTML="账号长度应在6-10位！";
return false;
}else if(account==null||account==" "){
document.getElementById("spaccid").innerHTML="账号不能为空！";
return false;
}else if(password.length<=0){
document.getElementById("sppasid").innerHTML="密码不能为空!";
return false;
}else{
document.getElementById("spaccid").innerHTML="√";
document.getElementById("sppasid").innerHTML="√";
}
//验证爱好
for(var i=0;i<fav.length;i++){
if(fav[i].checked){
return true;
}else{
document.getElementById("spfavId").innerHTML="爱好至少选择一项!";
return false;
}
}
}
</script>这里我们只使用提交验证的方式对部分表单元素进行了验证,感兴趣的话可以将后续为进行验证的表单元素,如: 电话,职业,地址等进行验证.
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss
我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:
当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下
我正在尝试使用正则表达式验证美元金额:^[0-9]+\.[0-9]{2}$这工作正常，但每当用户提交表单并且美元金额以0(零)结尾时，ruby(或rails？)将0砍掉。所以500.00变成500.0，因此正则表达式验证失败。有没有办法让ruby/rails保持用户输入的格式，而不管尾随零？ 最佳答案 我假设您的美元金额是小数类型。因此，用户在字段中输入的任何值在保存到数据库之前都会从字符串转换为适当的类型。验证适用于已转换为数字类型的值，因此在您的情况下，正则表达式并不是真正合适的验证过滤器。不过，您有几种可能性可以解决这个问