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} 的值)