jquery的validate.js 和 form.js 的使用方法
在使用 Jquery 的方法的验证并且修改 原Form 表单的提交方式的时候,需要引用的文件有
<script type="text/javascript" src="js/jquery-1.8.3-min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
如下的代码为页面添加了相应的验证和修改了提示信息,并且重写了表单提交的方法和添加自定义的身份证验证方法
jQuery.validator.addMethod("isIDCard", function (value, element) {
return this.optional(element) || (checkIDCard(value));
}, "请正确填写您的身份证码");
/*-------注册验证-----------*/
$().ready(function () {
$("#signupForm").validate({
rules: {
userName: {
required: true
},
telphone: {
required: true,
rangelength: [11, 11],
digits: "只能输入整数"
},
password: {
required: true,
rangelength: [8, 16]
},
confirm_password: {
required: true,
equalTo: "#User_Pwd",
rangelength: [8, 16]
},
IDCard: {
required: true,
isIDCard: true
},
email: {
required: true,
email: true
}
},
messages: {
userName: {
required: "请输入用户名"
},
telphone: {
required: "请输入手机号",
rangelength: jQuery.format("请输入正确的手机号"),
},
password: {
required: "请输入密码",
rangelength: jQuery.format("密码在8~16个字符之间"),
},
confirm_password: {
required: "请输入确认密码",
rangelength: jQuery.format("密码在8~16个字符之间"),
equalTo: "两次输入密码不一致"
},
IDCard: {
required: "请输入身份证号码",
isIDCard: "请正确填写您的身份证号码"
},
email: {
required: "请输入邮箱",
email: "邮箱格式不正确"
}
},
submitHandler: function (form) {
alert("submitted");
//$.post("/API/SysMenu/UserMain.ashx", { func: "Register", data: formToJson("#signupForm") }, function (obj) {
// if (obj.Status == apiok) {
// }
//}, "json");
$(form).ajaxSubmit({
type: "post",
url: "/API/SysMenu/UserMain.ashx",
dataType: "json",
data: { func: "Register", data: formToJson("signupForm") },
success: function (result) {
//返回提示信息
alert("ok");
}
});
}
});
});
<div class="wrapper">
<form id="signupForm" class="zcform">
<p class="clearfix">
<label class="one" for="userName">用户名:</label>
<input id="User_Account" name="User_Account" class="myinput required" value="" placeholder="用户名" />
</p>
<p class="clearfix">
<label class="one" for="Phone">手机号码:</label>
<input id="Phone" name="Phone" class="myinput required" value="18782463597" placeholder="请输入手机号" />
</p>
<p class="clearfix">
<label class="one">校验码:</label>
<input id="code" class="identifying_code" type="text" placeholder="请输入手机6位校验码" />
<input class="get_code" type="button" style="color:#fff;" value="获取验证码" />
</p>
<p class="clearfix">
<label class="one" for="User_Pwd">登录密码:</label>
<input id="User_Pwd" name="User_Pwd" type="password" value="12312312" class="myinput {required:true,rangelength:[8,20],}" placeholder="请输入密码" />
</p>
<p class="clearfix">
<label class="one" for="confirm_password">确认密码:</label>
<input id="confirm_password" name="confirm_password" type="password" value="12312312" class="myinput {required:true,equalTo:'#password'}" placeholder="请再次输入密码" />
</p>
<p class="clearfix">
<label class="one" for="DocumentNum">身份证号:</label>
<input id="DocumentNum" name="DocumentNum" class="myinput required" value="510922199107300176" placeholder="身份证号" />
</p>
<p class="clearfix">
<label class="one" for="Email">邮箱:</label>
<input id="Email" name="Email" type="text" class="myinput required" value="123@123.com" placeholder="邮箱" />
</p> <p class="clearfix"><input class="myinput submit" type="submit" value="立即注册" /></p>
<p class="last"><a href="#">立即登录></a></p>
</form>
</div>
jquery的validate.js 和 form.js 的使用方法的更多相关文章
- jquery表单验证插件 jquery.form.js ------转载
Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...
- jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
- 进一步丰富和简化表单管理的组件:form.js
上文<简洁易用的表单数据设置和收集管理组件>介绍了我自己的表单管理的核心内容,本文在上文的基础上继续介绍自己关于表单初始值获取和设置以及表单数据提交等内容方面的做法,上文的组件粒度很小,都 ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
- jquery.form.js(ajax表单提交)
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- jquery.form.js实现异步上传
前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...
- jquery.form.js不能解决连接超时(timeout)的解决方法
最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问
利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...
随机推荐
- Atom 和 markdown 基本使用
Atom 和 markdown 基本使用 Atom 常用的快捷键 Cmd + Shift + P 打开命令窗口,可以运行各种菜单功能. Cmd + T 快速的多文件切换 Ctrl + G 文件内跳转到 ...
- KMP模式匹配算法
KMP模式匹配算法 相信很多人对于这个还有点不了解,或者说是不懂,下面,通过一道题,来解决软考中的这个问题! 正题: aaabaaa,其next函数值为多少? 对于这个问题,我们应该怎么做呢? 1.整 ...
- 简单用DOM4J结合XPATH解析XML
由于DOM4J在解析XML时只能一层一层解析,所以当XML文件层数过多时使用会很不方便,结合XPATH就可以直接获取到某个元素 使用dom4j支持xpath的操作的几种主要形式 第一种形式 ...
- summary of k Sum problem and solutions in leetcode
I found summary of k Sum problem and solutions in leetcode on the Internet. http://www.sigmainfy.com ...
- JAVA Day2
标识符(类名:变量.属性.方法名: ) 组成:类名开头不能是数字,只能有字母数字_$组成. 命名规范: 类名每一个单词首字母大写(HelloWorld大驼峰法则) ...
- 第二个div+css前端项目
先展示效果图: 为了看全景,截图有点挫.实际效果比这个好一点. 通过 text-overflow可以隐藏多出的文字,而不会吧把div撑开或者溢出. html代码: <!DOCTYPE html& ...
- The Unique MST(次小生成树)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 22335 Accepted: 7922 Description Give ...
- 转 Delphi中使用FastMM4结合View CPU避免内存泄漏
http://www.cnblogs.com/kongchao/archive/2009/10/27/1590479.html 核心提示:内存泄漏经常出现在本地代码中,特别是多线程和发生异常的情况下, ...
- Linux下使用vim的tips
1.如果用户不能确定vi所处的状态,可以按Esc键两次返回初始状态. 2.Fedora 17下安装与配置ssh:http://blog.csdn.net/ashuai81/article/detail ...
- SolrCloud zookeeper节点信息
shard 节点列表 get /collections/appstore/leaders/shard1 { "core":"appstore", "n ...