今天竟然花了一整天做表单验证,真是很搞笑,我一时想自己写表单的js验证,可写了一长段后又懒得写下去了.
然后我又想用jquery 里的validate插件,但是样式和特效又和我的代码有冲突.
就这样反反复复折腾来折腾去,最后累了,索性不管样式了,用validate插件写出了客户端验证,前后花了不到10分钟.
总结教训就是:1.解决问题抓住主要矛盾
2.不要反反复复,纯粹是浪费时间,选定一种方案就坚持下去,不然纯粹折磨自己.
3.juery 的validate插件还是很不错的,就是初开始用不习惯,有点学习成本.还有自己设定样式有点难
mvc里的表单用不上验证控件了,觉得很不方便,以后还是选定juery 插件,这样便于快速开发.
ps:早上总算折腾好了,JS脚本如下:
<script type="text/javascript">
$().ready(function() {
$("#frmReg").validate(
{
errorElement: "reg", /* 插件会自动在文本框后生成一个label,取标记名为'reg',这样可以用 reg.success{}来控制样式,记住reg.success之间不要留空格*/
success: function(label) {
label.text(" ").addClass("success");
},
rules: {
username: {
required: true,
minlength: 2,
maxlength:16
},
email:{required:true,email:true},
password: {
required: true,
minlength: 6,
maxlength:16
},
confirmPassword:{required:true, equalTo: "#password"},
validate:{required:true}
}
}
);
});
</script>
html代码:
<form action="/Account/Register" method="post" id="frmReg">
<div class="left">
<div class="leadInfo">请填写以下信息,全部为必填:</div>
<div class="userInput">
<ul class="userInfo">
<li><span class="label">帐号:</span><input name="username" id="username" title="中英文均可 不超过8个汉字或16个字符"/></li>
<li><span class="label">Email帐号:</span><input name="email" id="email" title="请输入Email"/></li>
<li><span class="label">登录密码:</span><input type="password" name="password" id="password" title="请输入6至16位数字或字母"/></li>
<li><span class="label">重填密码:</span><input type="password" name="confirmPassword" id="confirmPassword" title="请重复上面的密码"/></li>
<li>
<div><span class="label">验证码:</span><input name="validate" id="validate" title="请输入下面图片上的数字"/></div>
<br /><span class="moreInfo">看不清<a href="javascript:refresh_captcha()">点此刷新</a> </span>
<img id="captchaImage" name="captchaImage" src="/validate/VerifyCodeImage.aspx" align="absmiddle" />
</li>
</ul>
</div>
<div class="c_gray" align="center">Email帐号及昵称,注册后不能修改,请仔细核对。</div><br />
<div class="userAction">
<input name="Submit" id="submit" type="submit" value="完成注册" tabindex="7" class="btnNormal" />
<input type="reset" id="reset" value="重填" tabindex="8" class="btnNormal" />
</div>
<div class="leadInfo">已经注册,<%= Html.ActionLink("请登陆","LogOn") %></div>
<input type='hidden' name="gender" value="-1" />
<input type='hidden' name="city" value="35" />
<input type='hidden' name="cburl" value="" />
</div>
</form>
<!--v:3.2-->
分享到:
相关推荐
赠送jar包:sentinel-spring-webmvc-adapter-1.8.0.jar; 赠送原API文档:sentinel-spring-webmvc-adapter-1.8.0-javadoc.jar; 赠送源代码:sentinel-spring-webmvc-adapter-1.8.0-sources.jar; 赠送Maven依赖信息...
赠送jar包:springfox-spring-webmvc-3.0.0.jar; 赠送原API文档:springfox-spring-webmvc-3.0.0-javadoc.jar; 赠送源代码:springfox-spring-webmvc-3.0.0-sources.jar; 赠送Maven依赖信息文件:springfox-...
赠送jar包:springfox-spring-webmvc-3.0.0.jar; 赠送原API文档:springfox-spring-webmvc-3.0.0-javadoc.jar; 赠送源代码:springfox-spring-webmvc-3.0.0-sources.jar; 赠送Maven依赖信息文件:springfox-...
赠送jar包:sentinel-spring-webmvc-adapter-1.8.0.jar; 赠送原API文档:sentinel-spring-webmvc-adapter-1.8.0-javadoc.jar; 赠送源代码:sentinel-spring-webmvc-adapter-1.8.0-sources.jar; 赠送Maven依赖信息...
NULL 博文链接:https://yihuawuye1.iteye.com/blog/2105063
NULL 博文链接:https://lgbolgger.iteye.com/blog/2105151
赠送jar包:spring-webmvc-5.3.10.jar; 赠送原API文档:spring-webmvc-5.3.10-javadoc.jar; 赠送源代码:spring-webmvc-5.3.10-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.3.10.pom; 包含翻译后的API...
Aspnet Mvc教程 1.说明 01:06 Aspnet Mvc教程 2.准备工作 02:37 Aspnet Mvc教程 3....Aspnet Mvc教程 4.默认程序结构 04:18 Aspnet Mvc教程 5. 基本工作流程 05:13 Aspnet Mvc教程 6.mvc理论讲解 03:...表单验证 10:50
赠送jar包:spring-webmvc-5.3.15.jar; 赠送原API文档:spring-webmvc-5.3.15-javadoc.jar; 赠送源代码:spring-webmvc-5.3.15-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.3.15.pom; 包含翻译后的API...
赠送jar包:spring-webmvc-5.0.8.RELEASE.jar; 赠送原API文档:spring-webmvc-5.0.8.RELEASE-javadoc.jar; 赠送源代码:spring-webmvc-5.0.8.RELEASE-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.0.8....
赠送jar包:spring-webmvc-5.3.7.jar; 赠送原API文档:spring-webmvc-5.3.7-javadoc.jar; 赠送源代码:spring-webmvc-5.3.7-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.3.7.pom; 包含翻译后的API文档...
Networkers2009:BRKVID-3102 - Advanced Video Compression Standards: MPEG-4 AVC, SVC and MVC
赠送jar包:spring-webmvc-5.3.7.jar; 赠送原API文档:spring-webmvc-5.3.7-javadoc.jar; 赠送源代码:spring-webmvc-5.3.7-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.3.7.pom; 包含翻译后的API文档...
赠送jar包:spring-webmvc-5.3.15.jar; 赠送原API文档:spring-webmvc-5.3.15-javadoc.jar; 赠送源代码:spring-webmvc-5.3.15-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.3.15.pom; 包含翻译后的API...
ASP.NET MVC 4 Recipes: A Problem-Solution Approach 632 pages Publisher: Apress; 1 edition (February 20, 2013) Language: English ISBN-10: 1430247738 ISBN-13: 978-1430247739 What you’ll learn ...
Aspnet Mvc教程 1.说明 01:06 Aspnet Mvc教程 2.准备工作 02:37 Aspnet Mvc教程 3....Aspnet Mvc教程 4.默认程序结构 04:18 Aspnet Mvc教程 5. 基本工作流程 05:13 Aspnet Mvc教程 6.mvc理论讲解 03:...表单验证 10:50
赠送jar包:spring-webmvc-5.2.15.RELEASE.jar; 赠送原API文档:spring-webmvc-5.2.15.RELEASE-javadoc.jar; 赠送源代码:spring-webmvc-5.2.15.RELEASE-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-...
赠送jar包:spring-webmvc-5.2.15.RELEASE.jar; 赠送原API文档:spring-webmvc-5.2.15.RELEASE-javadoc.jar; 赠送源代码:spring-webmvc-5.2.15.RELEASE-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-...
赠送jar包:spring-webmvc-5.0.8.RELEASE.jar; 赠送原API文档:spring-webmvc-5.0.8.RELEASE-javadoc.jar; 赠送源代码:spring-webmvc-5.0.8.RELEASE-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.0.8....
赠送jar包:spring-webmvc-5.1.3.RELEASE.jar; 赠送原API文档:spring-webmvc-5.1.3.RELEASE-javadoc.jar; 赠送源代码:spring-webmvc-5.1.3.RELEASE-sources.jar; 赠送Maven依赖信息文件:spring-webmvc-5.1.3....