扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一、使用Jquery.Validate进行验证方法
成都创新互联公司是一家专注于网站制作、网站建设与策划设计,杞县网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:杞县等地区。杞县做网站价格咨询:18982081108
$(document).ready(function () {
$("#pageForm").validate({
rules: {
DictKey: { required: true, maxlength: 10 },
DictContent: { required: true, maxlength: 10 }
},
messages: {
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },
DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }
},
submitHandler: function (form) {
form.submit();
}
})
})
DictKey ，DictContent：指需要验证的控件ID
submitHandler ：指通过验证后运行的函数，里面写入表单要提交的函数，否则表单不会提交
二、列出常用默认验证规则
(1)required:true 必输字段
(2)email:true 必须输入正确格式的电子邮件
(3)url:true 必须输入正确格式的网址
(4)date:true 必须输入正确格式的日期
(5)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(6)number:true 必须输入合法的数字(负数，小数)
(7)digits:true 必须输入整数
(8)creditcard: 必须输入合法的信用卡号
(9)equalTo:"#field" 输入值必须和#field相同
(10)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(12)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(14) equalLength:10 输入长度必须是10
(14)range:[5,10] 输入值必须介于 5 和 10 之间
(15)max:5 输入值不能大于5
(16)min:10 输入值不能小于10
三、使用ajax方法验证输入值是否存在
当文本框输入值时，或改变输入值时会自动到Server去验证输入值是否在数据库中存在
JS代码如下：
DictKey: { required: true, maxlength: 10,
remote: { //验证用户名是否存在
type: "POST",
url: '@Url.Content("~/Account/Test/")' //servlet
}
},
DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},
Server端：
[HttpPost]
public JsonResult Test(string DictKey) //DictKey即要验证控件的ID值
{
bool result;
if (DictKey == "a")
{
result = true;
}
else
{
result = false;
}
return Json(result);
}
根据Server端返回的True,False来决定验证是否通过
四、非submit按钮结合Jquery.Form进行提交
如果不是submit提交按钮，比如单击某个按钮触发表单验证，这时表单验证可用如下方式
function validateForm() {
//validate方法参数可选
return $("#form1").validate({
rules: {
},
messages:{
}
}).form();
}
function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
form.submit()
//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交
$("#UpdateForm").AjaxSubmit (function(){
Alert(“AjaxForm提交完成”)
});
}
}
第一步：
导入jquery.metadata.js和jquery.validate.js。
第二步：
在提交表单上加属性id=“tempForm"。
第三步：
将提交按钮改为type="button"，且加入onclick="submitForm()"属性。
第四步：
在script中加入方法submitForm。
function submitForm() {
if($("#tempForm").valid()) {
$("#tempForm").submit();
}
}
第五步：
加入验证代码，格式如下：
$(function() {
$("#tempForm").validate({
rules: {
"cost.costMoney": {
required: true,
number: true,
maxlength:18
}
},
messages: {
"cost.costMoney": {
required: "font color='red'成本金额不能为空/font",
number: "font color='red'成本金额必须为数字/font",
maxlength:"font color='red'成本金额长度不能大于
18/font"
}
}
});
});
6
第六步：
打开浏览器查看表单验证效果。
由数字、26个英文字母或者下划线组成的字符串可用jquery正则表达式：
/^\w+$/，验证代码为：
var reg = /^\w+$/;
if(reg.test($("input:text").val()))
// 验证通过
else
// 验证失败
下面给出实例演示：
创建Html元素
div class="box"
span请输入用户名，限定字母、数字或下划线的组合：/spanbr
div class="content"
input type="text"/
/div
input type="button" value="验证"
/div
设置css样式
div.box{width:300px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;height:50px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
input[type='text']{width:250px;height:40px;padding:0 5px;border:1px solid #6699cc;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
编写jquery代码
$(function(){
// 设置属性值
$("input:button").click(function() {
var reg = /^\w+$/;
// 如果验证失败给出警告
if(!reg.test($("input:text").val()))
alert("用户名限定为字母、数字或下划线的组合");
});
})
观察效果
不是jQuery需要进行表单验证， 是网页在提交数据的时候，为了减轻服务器的活，把能做的都在前端做了。
比如，用户输入一个手机号码，如果该手机号码格式是错的，比如格式是158125238pp
然后前端人员又没有对数据进行验证，然后又提交到服务器那里去，很显然这个手机号是错的，服务器存储这个手机号一点用处也没有、、、
所以需要进行表单验证
jquery validate自定义验证需要实现以下方法：
jQuery.validator.addMethod("验证名", function(value, element) {验证规则}
回调方法自带的两个参数分别为对应控件的value值和该控件的dom元素。
具体实现参考下面的例子：
//检测手机号是否正确
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var regPhone = /^1([3578]\d|4[57])\d{8}$/;
return this.optional(element) || ( length == 11 regPhone.test( value ) );
}, "请正确填写您的手机号码");
自定义验证规则的使用和默认规则是一样的：
rules:{
name:{
required:true,
minlength:2,
maxlength:10
},
tel:{
required:true,
minlength:7,
maxlength:11,
isMobile:true
}
}
如果是单纯的jQuery的话，那么验证和js的验证是相似的。只不过取得对象的时候用的是jQuery（‘’）。这个方便些。如果用jQuery ui的话 就可以用ui的form插件来验证
script src="./../../js/jquery.form.js" type="text/javascript" /script
//表单的ajax提交验证
function validate(formData, jqForm, options)
{
if($("input:checked").length0)
{
return isNull($("#gsbm"),$('#error'),'****')?true:false;
}else{
updateTips($('#error'),'没有正确数据行。');
return false;
}
}
//队返回结果处理
function response(responseText, statusText)
{
if(responseText=='1')
{
updateTips( $('#error'),'录入成功');
setTimeout("window.location.reload()", 2000);
}else
{
updateTips($('#error'), '录入失败，请刷新重试。');
}
return true;
}
$('#MyForm').ajaxForm( {beforeSubmit: validate,success: response} );
这个是无刷新提交。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网