1. myEclipse 导入 jquery包为什么整个项目都会报错
MyEclipse提供比较严谨的js校验功能,因此ExtJs、jQuery等前端框架导入到MyEclipse后均会提示错误,只需将校验去掉即可
方法一:
1、在MyEclipse选择菜单栏window
2、选择preferences
3、左侧菜单树中展开myeclipse
4、选择下面的validation
5、将右侧表格中javascript validator for Js files 把Bulid 复选框的勾去掉 就可以了
方法二:
1、在所建立的工程项目上右键单击
2、找到myeclipse
3、在Exclude Form Validation上单击一下,打上√号
4、点击确定按钮即可
2. 使用jquery验证框架怎样让required属性的文字显示在指定位置
使用class="{}"的方式,必须引入包:jquery.metadata.js;
可以使用如下的方法,修改提示内容:class="{required:true,minlength:5,messages:{required:'请输入内容'}}";
在使用equalTo关键字时,后面的内容必须加上引号,如下代码:class="{required:true,minlength:5,equalTo:'#password'}"。
3. JQuery validate 验证框架,怎么设置onblur时验证
貌似改不了,这个js是针对form验证的,提交表单后才能验证。你可以自己触发下表单的提交。
加个代码
(function($) {
$("#form1 input").blur(function(){$("#form1").submit();})
}
)
4. web前端开发框架有哪些
常见的web前端开发框架如下:
1、Bootstrap:
主流框架之一,Bootstrap 是基于 HTML、CSS、JavaScript的,它简洁灵活,使得 Web 开发更加快捷。
2、html5-boilerplate:
该框架可以快速构建健壮,且适应力强的web app或网站。
3、Meteor:
Meteor是新一代的开发即时web应用的开源框架,它能在较短时间内完成开发。
4、Materialize:
基于材料设计的现代化响应式前端框架。可提供默认的样式,自定义组件。此外,Materialize还改进动画和过渡,为开发人员提供流畅的体验。
5、Amaze UI:
国内首个开源HTML5跨屏前端框架产品系列,中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架Amaze UI Touch以及针对跨屏HTML5网页开发的Amaze UI Web。
(4)jquery前端校验框架扩展阅读:
web框架程序的作用:
Web框架使得在进行Web应用开发的时候,减少了工作量。Web框架主要用于动态网络开发,动态网络主要是指现在的主要的页面,可以实现数据的交互和业务功能的完善。
使用Web框架进行Web开发的时候,在进行数据缓存、数据库访问、数据安全校验等方面,不需要自己再重新实现,而是将业务逻辑相关的代码写入框架就可以。也就是说,通过对Web框架进行主观上的“缝缝补补”,就可以实现自己进行Web开发的需求了。
以PHP为例,PHP可以在apache服务器上进行Web开发,而不必使用框架。使用PHP进行开的时候,在不适用框架的情况下,数据库连接就需要自己来实现,页面的生成和显示也是一样。比如框架的话可以完成避免sql注入的工作,而使用PHP在不用框架的情况下,这部分要自己做。
参考资料来源:网络-前端开发
5. 怎么用jQuery进行表单验证
验证密码是否一致很简单
一句话可以解决
<script type="text/javascript">
$(function(){
//省略代码
if$("#password1").val()!=$("#password2"){
//两次输入不同时执行的代码
} else{
//否则执行的代码
}
//省略的代码
})
</script>
#password1是第一个密码框的id
#password2是第二个密码框的id
一句if语句就可以搞定
6. mvc3+jquery validation怎么验证日期
在ASP.NET MVC 3.0中,jQuery验证框架被引入是我们可以采用Unobtrusive JavaScript的方式进行客户端验证。
接下来我们通过Visual Studio的ASP.NET MVC项目模板创建验证日期的Web应用,这样做有两个目的:
其一、项目在创建过程中会自动添加包含jQuery本身及其验证插件的.js文件;
其二,可以确保我们现在使用的用于验证的.js文件和ASP.NET MVC真正使用的.js文件是一致的。
先创建一个AgeRangeAttribute类,文件名: AgeRangeAttribute.cs代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.ComponentModel.DataAnnotations;
usingSystem.Web.Mvc;
{
publicclassAgeRangeAttribute:RangeAttribute,IClientValidatable
{
publicAgeRangeAttribute(intminimum,intmaximum)
:base(minimum,maximum)
{}
publicoverrideboolIsValid(objectvalue)
{
DateTimebirthDate=(DateTime)value;
DateTimeage=newDateTime(DateTime.Now.Ticks-birthDate.Ticks);
returnage.Year>=(int)this.Minimum&&age.Year<=(int)this.Maximum;
}
(stringname)
{
returnbase.FormatErrorMessage("年龄");
}
publicIEnumerable<ModelClientValidationRule>GetClientValidationRules(ModelMetadatametadata,ControllerContextcontext)
{
=newModelClientValidationRule(){ValidationType="agerange",ErrorMessage=FormatErrorMessage(metadata.DisplayName)};
validationRule.ValidationParameters.Add("currentdate",DateTime.Today.ToString("dd-MM-yyyy"));
validationRule.ValidationParameters.Add("minage",this.Minimum);
validationRule.ValidationParameters.Add("maxage",this.Maximum);
yieldreturnvalidationRule;
}
}
}Views层 Views/Home/Index.cshtml代码如下:
@modelCustomClientValidation.Models.Person
@using(Html.BeginForm())
{
@Html.EditorForModel()
<inputtype="submit"value="Save"/>
}Models层 /Models/Person.cs代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.ComponentModel.DataAnnotations;
usingSystem.ComponentModel;
.Models
{
publicclassPerson
{
[DisplayName("姓名")]
publicstringName{get;set;}
[AgeRange(18,30,ErrorMessage="{0}必须在{1}和{2}之间!")]
[DisplayName("出生日期")]
[DisplayFormat(ApplyFormatInEditMode=true,DataFormatString="{0:dd-MM-yyyy}")]
publicDateTime?BirthDate{get;set;}
}
}Controllers层Controllers/HomeController.cs
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;
usingCustomClientValidation.Models;
.Controllers
{
publicclassHomeController:Controller
{
publicActionResultIndex()
{
returnView(newPerson{BirthDate=DateTime.Today,Name="Foo"});
}
[HttpPost]
publicActionResultIndex(Personperson)
{
returnView(person);
}
}
}
接下来是客户端的js文件代码
Scripts/cutom-validation.js
jQuery.validator.addMethod("agerange",
function(value,element,params){
varminAge=params.minage;
varmaxAge=params.maxage;
varliteralCurrentDate=params.currentdate;
varliteralBirthDate=value;
varliteralCurrentDates=literalCurrentDate.split('-');
varliteralBirthDates=literalBirthDate.split('-');
varbirthDate=newDate(literalBirthDates[2],literalBirthDates[1],literalBirthDates[0]);
varcurrentDate=newDate(literalCurrentDates[2],literalCurrentDates[1],literalCurrentDates[0]);
varage=currentDate.getFullYear()-birthDate.getFullYear();
returnage>=minAge&&age<=maxAge
});
jQuery.validator.unobtrusive.adapters.add("agerange",["currentdate","minage","maxage"],function(options){
options.rules["agerange"]={
currentdate:options.params.currentdate,
minage:options.params.minage,
maxage:options.params.maxage
};
options.messages["agerange"]=options.message;
});
运行程序,效果图如下:
如果需要完整工程方案包代码可以分享。
7. jquery校验框架用的是name还是id
你这么写其实是添加验证成功的了,验证会被执行,只是submit的时候不是你想要的效果。
你可以试试,输入第一个框后,在第二个框里点一下不输入再点到第三个框。
可以看到验证的逻辑被执行了。
分析一下原因:
jquery.validate 这个插件在生成rules的时候是按name来生成的,也就是说,你的表单其实只添加了一条验证rule:就是对name=test_a的字段做非空和最小长度验证。
当输入框失去焦点时会触发这条规则,因为每个input的name都是test_a,可以命中rules中的规则
当submit的时候,同样会调用{'test_a': { required:true, minlength: 2}}这条规则, 只不过这条规则会被通过,因为已经有一个test_a字段达到了规则的要求。
8. 关于JQUERY验证框架 accept的用法
accept()函数是这样定义的:
#include <sys/socket.h>
int accept(int sockfd, void *addr, int *addrlen);
sockfd 相当简单,是和 listen() 中一样的套接字描述符。addr 是个指 向局部的数据结构 sockaddr_in 的指针。这是要求接入的信息所要去的地 方(可以测定那个地址在那个端口呼叫)。在它的地址传递给 accept 之 前,addrlen 是个局部的整形变量,设置为 sizeof(struct sockaddr_in)。 accept 将不会将多余的字节给 addr。如果放入的少些,那么它会通过改
变 addrlen 的值反映出来。
同样,在错误时返回-1,并设置全局错误变量 errno。
9. JQuery的表单验证框架怎么让他在失去焦点时进行验证而不是提交
在每一个要验证的标签里面加上onblur="login()"事件
html代码:
10. JQuery框架的主要内容
由于项目用的是SSH框架,又用到了Freemarker模板页面,数据库是Mysql5.0,主要内容如下所示:
1. 注册页面,用Freemarker所写,这里使用了JQuery的一个表单验证框架formvalidator:
对前台注册页面register.ftl进行表单验证,当符合基本验证规则后,再通过JQuery formvalidator Ajax将数据传到action中。
register.ftl:
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>会员注册</title>
<link href=${base}/forum/css/pass.css rel=stylesheet type=text/css>
<link href=${base}/css/validator.css rel=stylesheet type=text/css/>
<script type=text/javascript src=<@s.url value='/js/showError.js'/>></script>
<script type=text/javascript src=<@s.url value='/js/jquery-1.3.2.min.js'/>></script>
<script type=text/javascript src=${base}/js/formValidator.js charset=UTF-8></script>
<script type=text/javascript src=${base}/js/formValidatorRegex.js charset=UTF-8></script>
<!—下面的JS代码是,实时验证用户名或注册邮箱是否存在 -->
<script type=text/javascript>
$(document).ready(function(){
$.formValidator.initConfig({formid:form1,onerror:function(msg){},onsuccess:function(){return true;}});
$(#username)
.formValidator({onshow:请输入用户名,onfocus:请您记住填写的用户名,以后登录时需要用到!,oncorrect:该用户名可以注 册})
.inputValidator({min:4,max:15,onerror:用户名长度不能小于4个字符})
.ajaxValidator({
type : get,
datatype: json,
data: username:+$(#username).val(),
url : ${base}/user/ajax/userCheck!checkUser.action,
success : function(data){if(data.userExist){return false;}else{return true;}},
buttons: $(#button),
error: function(){alert(服务器没有返回数据,可能服务器忙,请重试);},
onerror : 该用户名已经存在,请更换用户名,
onwait : 正在对用户名进行合法性校验,请稍候…
});
$(#email)
.formValidator({onshow:请输入邮箱,onfocus:邮箱6-100个字符,请正确输入,oncorrect:恭喜你,邮箱可以注册,forcevalid:true})
.inputValidator({min:6,max:100,onerror:你输入的邮箱长度非法,请确认})
.regexValidator({regexp:^([\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$,onerror:你输入的邮箱格式不正确})
.ajaxValidator({
type : get,
datatype: json,
data: email:+$(#email).val(),
url : ${base}/user/ajax/userCheck!checkUser.action,
success : function(data){if(data.emailExist){return false;}else{return true;}},
buttons: $(#button),
error: function(){alert(服务器没有返回数据,可能服务器忙,请重试);},
onerror : 该邮箱已经存在,请更换邮箱,
onwait : 正在对邮箱进行校验,请稍候…
});
});
</script>
</head>
<body>
<div id=passmain>
<div class=passbottom>
<div class=pbleftb>
<h3 style=text-align:center;>新用户注册</h3>
<p class=p2t>带*号的项目为必选项, 请全部填写</p>
<ul class=p2ul>
<@s.form action=register method=POST theme=simple id=form1 name=form1>
<@s.token name=token/>
<li class=p2li>
<div class=p2left>用户登录昵称<span style=color:#FF0000;>* </span></div>
<div class=p2right><@s.textfield name=user.username id=username class=item_input size=30 maxlenght=20 required=true onblur=checkUser(); />
</div>
<div class=p2center><div id=usernameTip/>
</div>
</li><br>
<li class=p2li>
<div class=p2left>性别<span style=color:#FF0000;>* </span></div>
<div class=p2right><@s.radio
name=user.gender
list={action.getText('user.gender.male'):action.getText(user.gender.male),action.getText('user.gender.female'):action.getText(user.gender.female)}
size=30/></div>
</li><br>
<li class=p1t>注意:邮箱必须是可以收到程序员之家激活码的。</li>
<li class=p1t>用户注册后,需要激活,才可以使用!激活码只会发到您注册邮箱中。</li>
<li class=p2li>
<div class=p2left>Email地址<span style=color:#FF0000;>* </span></div>
<div class=p2right><@s.textfield name=user.email id=email class=item_input size=30 onblur=checkEmali(); required=true/>
</div>
<div class=p2center><div id=emailTip></div></div>
</li><br>
<li class=p1t>5-20位字母、数字或字符组合,首字母必须为字母。</li>
<li class=p1t>为了您的帐户安全,强烈建议您的密码使用字符+数字+特殊字符方式,并且密码长度大于8位。</li>
<li class=p2li>
<div class=p2left>密码<span style=color:#FF0000;>* </span></div>
<div class=p2right>
<@s.password name=user.password id=userPassword class=item_input size=30 maxlength=16 onblur=checkPassword(); required=true/>
</div>
<div class=p2center><div id=divHintPassword style=display:none;></div>
</div>
</li><br>
<li class=p2li>
<div class=p2left>重复输入密码<span style=color:#FF0000;>* </span></div>
<div class=p2right><@s.password name=verifyPassword id=verifyPassword class=item_input size=30 maxlength=16 onblur=validatePassword(); required=true/></div>
<div class=p2center>
<div id=divHintverifyPassword style=display:none;></div>
</div>
</li><br>
<br>
<li class=p2li>
<div class=p2left>输入校验码<span style=color:#FF0000;>*</span> </div>
<div class=p2right><@s.textfield name=validationCode class=item_input size=10 required=true/>
</div>
</li>
<li class=p2li>
<div class=p2left>校验码<span style=color:#FF0000;>*</span> </div>
<div class=p2right><img src=<@s.url value='/vcode.jpg'/> align='absmiddle' border='0'/></div>
</li>
<li class=p1t><input name=提交 type=submit value=注册用户 />
</li>
</ul>
</div>
</@s.form>
</div>
</div>
</body>
</html>
2.后台Action类,UserAjaxAction.java:
基于Hibernate与数据库进行交互验证用户名和邮箱是否存在,同时返回的数据格式为JSon类型的。
package com.qiuyanluocheng.action;
import IO.IOException;
import com.googlecode.jsonplugin.annotations.JSON;
/**
*
* @author qiuyanluocheng
*
*/
public class UserAjaxAction extends BaseAction
{
/**
* BaseAction是自己封装的
*/
private static final long serialVersionUID = 1L;
private String username;// 用户名
private String email;// 邮箱
private boolean userExist;
private boolean emailExist;
// 表示返回的Json数据中不含此属性
@JSON(serialize=false)
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getEmail()
{
return email;
}
public void setEmail(String email)
{
this.email = email;
}
public boolean isUserExist()
{
return userExist;
}
public void setUserExist(boolean userExist)
{
this.userExist = userExist;
}
public boolean isEmailExist()
{
return emailExist;
}
public void setEmailExist(boolean emailExist)
{
this.emailExist = emailExist;
}
// 检查用户是否存在
public String checkUser() throws IOException
{
if(username != null){
if(this.getUserService().isUsernameExist(username)){
// System.out.println(用户存在!!!!!+username);
userExist = true;
}else{
// System.out.println(用户不存在!!!!!+username);
userExist = false;
}
}
if(email != null){
if(this.getUserService().isEmailExist(email)){
// System.out.println(邮箱存在!!!!!+email);
emailExist = true;
}else{
// System.out.println(邮箱不存在!!!!!+email);
emailExist = false;
}
}
return ajax;
}
}
注意需要导入jsonplugin-0.34.jar包。
3. 配置文件struts.xml:
配置action,并且注意package要继承json-default包,且结果集类型为json。
<?xml version=1.0 encoding=utf-8?>
<!DOCTYPE struts PUBLIC -//Apache Software Foundation//DTD Struts Configuration 2.0//EN dtds/struts-2.0.dtd>
<struts>
<package name=userAjax extends=json-default namespace=/user/ajax>
<action name=userCheck class=com.qiuyanluocheng.action.UserAjaxAction>
<!—返回结果类型必须为json -->
<result name=ajax type=json></result>
</action>
</package>
</struts>
jQuery框架中增加对输入框的验证,在设计页面表单时,常常因为需要写大量的验证信息,还要写复杂的正则表达式,现在这样一个验证框架可以解决这样的繁杂问题。这样jquery.validate.js就诞生了,jquery.validate.js是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持 。
validate自带的默认验证
required: 必选字段,
remote: 请修正该字段,
email: 请输入正确格式的电子邮件,
url: 请输入合法的网址,
date: 请输入合法的日期,
dateISO: 请输入合法的日期 (ISO).,
number: 请输入合法的数字,
digits: 只能输入整数,
creditcard: 请输入合法的信用卡号,
equalTo: 请再次输入相同的值,
accept: 请输入拥有合法后缀名的字符串,
maxlength: jQuery.format(请输入一个长度最多是 {0} 的字符串),
minlength: jQuery.format(请输入一个长度最少是 {0} 的字符串),
rangelength: jQuery.format(请输入一个长度介于 {0} 和 {1} 之间的字符串),
range: jQuery.format(请输入一个介于 {0} 和 {1} 之间的值),
max: jQuery.format(请输入一个最大为 {0} 的值),
min: jQuery.format(请输入一个最小为 {0} 的值)