jquery表单验证提交,jquery表单验证插件

jquery表单验证提交,jquery表单验证插件,jQuery实现表单验证

本文主要详细介绍表单验证的jQuery实现。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

使用jQuery验证表单以供参考。具体情况如下

register.html

!文档类型html

html lang='en '

meta charset='UTF-8 '

登记簿/标题

!-导入jQuery -

脚本src=' js/jquery-3 . 3 . 1 . js '/script

!-检查表格-

脚本

/*

表单验证:

1.用户名:长度为8到20个字符。

2.密码:单词字符,长度为8到20位。

3 .电子邮件:邮件格式

4.名称:非空白。

5.手机号码:手机号码的格式

6.出生日期:非空。

*/

//验证用户名

//字字符,长度为8到20位

函数检查用户名(){

//1.获取用户名值

var username=$('#username ')。val();

//2.定义检查的规律性

var reg _用户名=/^\w{8,20}$/;

//3.确定是否满足验证要求,并给出提示信息。

var flag=reg_username.test(用户名);

如果(标志){

//用户名合法

$('#username ')。css('border ',' ');

}否则{

//用户名非法,添加红色边框

$('#username ')。css('边框',' 1px纯红');

}

//4.返回验证是否通过。

返回标志;

}

//验证密码

函数checkPassword() {

//1.获取密码值

var password=$('#password ')。val();

//2.定义常规

var reg _ password=/^\w{8,20}$/;

//3.判断并给出提示信息。

var flag=reg _ password . test(password);

如果(标志){

//密码合法

$('#password ')。css('border ',' ');

}否则{

//密码不合法,加红色边框

$('#password ')。css('边框',' 1px纯红');

}

//4.返回验证是否通过。

返回标志;

}

//验证邮箱

函数checkEmail() {

//1.去拿邮箱

var email=$('#email ')。val();

//2.定义常规itcast@163.com

var reg _ email=/^\w @ w \。\ w $/;

//3.判断

var flag=reg _ email . test(email);

如果(标志){

$('#email ')。css('border ',' ');

}否则{

$('#email ')。css('边框',' 1px纯红');

}

//4.返回验证是否通过。

返回标志;

}

//检查名称

函数checkName() {

//1.得到名字

var name=$('#name ')。val();

//2.判断是否为空,返回验证是否通过。

if(type of name==' undefined ' | | name==null | | name==' '){

$('#name ')。css('边框',' 1px纯红');

返回false

}否则{

$('#name ')。css('border ',' ');

返回true

}

}

//检查手机号码

功能检查电话(){

//1.获取手机号码

var telephone=$('#telephone ')。val();

//2.定义常规

var reg _ tel=/^1(3|4|5|6|7|8|9)\d{9}$/;

//3.判断

var flag=reg_tel.test(电话);

如果(标志){

$(' #电话')。css('border ',' ');

}否则{

$(' #电话')。css('边框',' 1px纯红');

}

//4.返回验证是否通过。

返回标志;

}

//验证出生日期

函数checkBirthday() {

//1.得到出生日期

var生日=$(' #生日')。val();

//2.判断是否为空,返回验证是否通过。

如果(生日类型=='未定义' ||生日==空||生日=='') {

$('#name ').css('边框,' 1px纯红');

返回错误的

}否则{

$('#name ').css('border ',' ');

返回真实的

}

}

//进行校验

$(function () {

//当表单提交时,调用所有的校验方法

$('#registerForm ').提交(函数(){

//如果这个方法没有返回值,或者返回为没错,则表单提交,如果返回为假的,则表单不提交

//1.发送数据到服务器

如果(检查用户名()检查密码()检查电子邮件()检查姓名()检查电话()检查生日()){

//校验通过,发送创建交互式、快速动态网页应用的网页开发技术请求,提交表单的数据用户名=张三密码=123

$.post('registerServlet ',$(this).序列化(),函数(数据){

if (data.flag) {

//注册成功,跳转到成功页面

警报('注册成功!');

}否则{

//注册失败,给错误消息添加提示信息

$('#errorMsg ').html(数据。错误消息);

}

});

}

//2.不让页面跳转

返回错误的

});

//当某一个组件失去焦点是,调用对应的校验方法

$('#username ').模糊(检查用户名);

$('#password ').模糊(检查密码);

$('#email ').模糊(检查电子邮件);

$('#name ').模糊(检查姓名);

$(' #电话')。模糊(检查电话);

$(' #生日')。模糊(检查生日);

})

/脚本

/头

身体

差异

p用户注册/p

!-注册表单-

div id=' error msg ' style=' color:red;文本对齐:居中'/格

表单id='注册表单'操作='注册servlet '方法=' post '

table style=' margin-top:25px;'

tr

td class='td_left '

='用户名'的标签用户名/标签

/td

td class='td_right '

输入类型=' text ' id='用户名' name='用户名' placeholder='请输入账号'

/td

/tr

tr

td class='td_left '

='密码'的标签密码/标签

/td

td class='td_right '

输入类型=' text ' id=' password ' name=' password ' placeholder='请输入密码'

/td

/tr

tr

td class='td_left '

='电子邮件'电子邮件的标签/标签

/td

td class='td_right '

输入类型=' text ' id=' email ' name=' email ' placeholder='请输入'电子邮件'

/td

/tr

tr

td class='td_left '

='名称'的标签姓名/标签

/td

td class='td_right '

输入类型=' text ' id=' name ' name=' name ' placeholder='请输入真实姓名'

/td

/tr

tr

td class='td_left '

='电话'的标签手机号/标签

/td

td class='td_right '

输入类型=' text ' id=' telephone ' name=' telephone ' placeholder='请输入您的手机号'

/td

/tr

tr

td class='td_left '

='性别'的标签性别/标签

/td

td class='td_right gender '

输入类型=' radio ' id=' sex ' name=' sex ' value='男检查男

输入类型='单选'名称='性别'值='女' 女

/td

/tr

tr

td class='td_left '

='生日'的标签出生日期/标签

/td

td class='td_right '

输入类型='日期id='生日'名称='生日'占位符='年/月/日'

/td

/tr

tr

td class='td_left '

/td

td class='td_right check '

输入类型='提交'类='提交'值='注册'

span id=' msg ' style=' color:red;'/span

/td

/tr

/表格

/表单

/div

/body

脚本

/脚本

/html

后台处理代码也可以不看,只是前后端进行交互需要,RegisterServlet.java

包com。演示。servlet

导入javax。servlet。servlet异常;

导入javax。servlet。注释。web servlet

导入javax。servlet。http。http servlet

导入javax。servlet。http。http servlet请求;

导入javax。servlet。http。http servlet响应;

导入Java。io。io异常;

导入Java。util。迭代器;

导入Java。util。地图;

导入Java。util。设置;

@WebServlet('/registerServlet ')

公共类RegisterServlet扩展HttpServlet {

@覆盖

受保护的void doGet(http servlet请求req,HttpServletResponse resp)抛出ServletException,IOException {

MapString,String[]参数map=req。getparametermap();

SetString keySet=参数映射。keySet();

迭代器字符串迭代器=键集。迭代器();

while (iterator.hasNext()) {

字符串键=迭代器。next();

系统。出去。println(key):'参数映射。get(key)[0]);

}

//String str='{flag:true,errorMsg:'注册失败'}';//错误范例

String str='{'flag':'true ',' errorMsg ':'注册失败'}';

resp。设置内容类型(' application/JSON;charset=utf-8 ');

resp.getWriter().打印(字符串);

}

@覆盖

受保护的void doPost(http servlet请求req,HttpServletResponse resp)抛出ServletException,IOException {

this.doGet(req,resp);

}

}

效果:

本节代码地址:演示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: