用js方法做提交表单的校验

基础知识：

原始提交如下：


<form action="<%=basePath %>puser/register" method="post"><input placeholder="Name" name="realname">  <input type="email" placeholder="Email" name="email"><input type="password" placeholder="Password" name="password"><input type="password" placeholder="Again input Password"  ><button type="submit"></button></form>

说明：

form是一个表单，用来发送http请求。直观的说，只要用form将需要提交到服务器的标签包围，当提交的时候，就会向服务器发送有name属性的数据。所以，input内容提交必须有name属性。
action：服务器接口路径；
method:选择发送请求的方式，默认是get，通常用post。get请求会在地址栏显示参数，并且有长度限制。post则没有。
id:标识标签元素
当提交后，服务器就会得到：username=填的用户名 & password=填的密码
当点击提交后，form数据就会发送。通常提交前要校验数据。比如长度规则等。所以需要js。　　　　
js校验：

方法：
　　　　　在from属性后面接着添加οnsubmit="return false;"属性.表示不提交。true则相反。这里可以用一个方法替换。变成：

<form action="<%=basePath %>puser/register" method="post" onsubmit="return compare();">

js方法部分：

<script type="text/javascript">function compare(){var password = document.getElementById("password").value;var password2 = document.getElementById("password2").value;if(password!=password2){alert("两次输入的密码不一致！！");return false;}           }
</script>

除此之外还有使用ajax提交，在那之前进行校验（关于ajax请查看我的其他文章），以上。

用js方法做提交表单的校验相关推荐

php js 防止重复提交表单,php如何防止form重复提交
php如何防止form重复提交引入cookie机制来解决(推荐学习:PHP编程从入门到精通) 用户提交表单到后端,在 Cookie 中做标记,指定时间内重复提交无效.但是用户禁用 Cookie 这个 ...
【jQuery】使用jquery.form.js，获取提交表单返回值
jQuery表单库介绍实现 html 中提交表单并实现不跳转页面处理返回值 jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简 ...
js模拟支付宝提交表单
弄过支付宝的程序员可能都知道,里面有很多地方都用到了自提交表单的方式,支付宝的接口通过请求API的形式取得服务器返回的表单字符串,使用out.print("表单字符串")在jsp页 ...
php提交表单并发送邮件,php提交表单发送邮件的方法
php提交表单发送邮件的方法发布于 2015-03-22 09:54:24 | 132 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext Prep ...
nodejs接收表单写入mysql_NodeJS提交表单存数据库（转）
姓名: 性别: 年龄: 手机: $('#ok_btn').on('click',function(){ var name = $.trim($('#name').val()), sex = $.tri ...
jQuery使用ajaxSubmit()提交表单示例（转）
这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下: 准备工作: ajaxSubmit(obj)方法是jQuery ...
提交表单POST请求
Web 表单在 HTML 中以窗体顶端元素表示,在 JavaScript 中则以 HTMLFormElement 类型表示. HTMLFormElement 类型继承自 HTMLElement 类 ...
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录一.wxml文档二.新建页面快捷方式三.微信小程序引入weui 四.双向数据绑定 1.wxml渲染层 2.js逻辑层提交表单到后端五.微信小程序跳转到H5 一.wxml文档 ...
get 和 post 俩种提交表单的方式
get 和 post 俩种提交表单的方式自动提交表单的数据启用表单的自动提交方式时, 我们需要添加上这一句: eg:action="/Main/GetData" method= ...

用js方法做提交表单的校验

基础知识：

原始提交如下：

说明：

用js方法做提交表单的校验相关推荐

最新文章

热门文章