常用表单JS代码

最新推荐文章于 2023-02-03 10:00:00 发布
最新推荐文章于 2023-02-03 10:00:00 发布
阅读量576 收藏
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laukicn/article/details/54695106
版权 
                            <form οnsubmit="return false;"><div class="form-group" id="f_1485165301182">
                                            <div class="label">
                                                <label for="f_username_txt">
                                                    用户名/账号
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_username_txt" name="f_username_txt" maxlength="50" value="" data-validate="required:请填写用户名/账号,username:请输入英文字母开头的字母、下划线、数字,ajax#(demo/getdata.html?username={value}):该账号已存在,length#<50:字数在0-50个" placeholder="英文字母开头的字母、下划线、数字">
                                            <div class="input-help"><ul><li>请填写用户名/账号</li><li>请输入英文字母开头的字母、下划线、数字</li><li>该账号已存在</li></ul></div></div>
                                        </div><div class="form-group" id="f_1485165302301">
                                            <div class="label">
                                                <label for="f_password_txt">
                                                    密码
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_password_txt" name="f_password_txt" maxlength="50" value="" data-validate="required:请填写密码,username:请输入英文字母开头的字母、下划线、数字,length#<50:字数在0-50个" placeholder="英文字母开头的字母、下划线、数字">
                                            <div class="input-help"><ul><li>请填写密码</li><li>请输入英文字母开头的字母、下划线、数字</li></ul></div></div>
                                        </div><div class="form-group" id="f_1485165304286">
                                            <div class="label">
                                                <label for="f_email_txt">
                                                    电子邮箱
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_email_txt" name="f_email_txt" maxlength="50" value="" data-validate="required:请填写密码,email:请输入Email,如：1979788761@qq.com,length#<50:字数在0-50个" placeholder="请输入电子邮箱">
                                            </div>
                                        </div><div class="form-group" id="f_1485165305598">
                                            <div class="label">
                                                <label for="f_qq_txt">
                                                    QQ号码
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_qq_txt" name="f_qq_txt" maxlength="11" value="" data-validate="required:请填写QQ号码,qq:请输入QQ号码,如：1979788761,length#<11:字数在0-11个" placeholder="请输入QQ号码">
                                            </div>
                                        </div><div class="form-group" id="f_1485165307382">
                                            <div class="label">
                                                <label for="f_mobile_txt">
                                                    手机号
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_mobile_txt" name="f_mobile_txt" maxlength="11" value="" data-validate="required:请填写内容,mobile:请输入手机号码" placeholder="输入手机号码">
                                            </div>
                                        </div><div class="form-group" id="f_1485165308271">
                                            <div class="label">
                                                <label for="f_phone_txt">
                                                    联系电话
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_phone_txt" name="f_phone_txt" maxlength="12" value="" data-validate="required:请填写联系电话,phone:请输入联系电话" placeholder="输入联系电话">
                                            </div>
                                        </div><div class="form-group" id="f_1485165309166">
                                            <div class="label">
                                                <label for="f_tel_txt">
                                                    手机号/电话号
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_tel_txt" name="f_tel_txt" maxlength="12" value="" data-validate="required:请填写手机号/电话号,tel:请输入手机号/电话号" placeholder="输入手机号码/联系电话">
                                            </div>
                                        </div><div class="form-group" id="f_1485165314726">
                                            <div class="label">
                                                <label for="f_englishname_txt">
                                                    英文名
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_englishname_txt" name="f_englishname_txt" maxlength="161" value="" data-validate="required:请填写英文名,englishname:请输入英文名，1到161个字母" placeholder="输入英文名">
                                            <div class="input-help"><ul><li>请填写英文名</li><li>请输入英文名，1到161个字母</li></ul></div></div>
                                        </div><div class="form-group" id="f_1485165318631">
                                            <div class="label">
                                                <label for="upfile">
                                                    照片/头像
                                                </label>
                                            </div>
                                            <div class="field">
                                                <a class="button input-file" href="javascript:void(0);">
                                                    + 请选择上传文件
                                                    <input size="100" data-validate="required:请选择文件,img:只能上传jpg|gif|png|ico格式文件" type="file">
                                                </a>
                                            <div class="input-help"><ul><li>请选择文件</li><li>只能上传jpg|gif|png|ico格式文件</li></ul></div></div>
                                        </div><div class="form-group" id="f_1485165320814">
                                            <div class="label">
                                                <label for="f_age_txt">
                                                    年龄
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_age_txt" name="f_age_txt" maxlength="2" value="" data-validate="required:请填写年龄,age:请输入年龄，1到99岁" placeholder="输入年龄">
                                            </div>
                                        </div><div class="form-group" id="f_1485165321672">
                                            <div class="label">
                                                <label for="f_date_txt">
                                                    出生日期
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_date_txt" name="f_date_txt" maxlength="2" value="" data-validate="required:请填选择日期,date:请输入日期，如：2015-05-06" placeholder="输入日期">
                                            </div>
                                        </div><div class="form-group" id="f_1485165322462">
                                            <div class="label">
                                                <label for="f_idcard_txt">
                                                    身份证号
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_idcard_txt" name="f_idcard_txt" maxlength="2" value="" data-validate="required:请填写身份证号码,idcard:请输入18位身份证号码" placeholder="输入身份证号码">
                                            </div>
                                        </div><div class="form-group" id="f_1485165334174">
                                            <div class="label">
                                                <label for="f_zipcode_txt">
                                                    邮政编码
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_zipcode_txt" name="f_zipcode_txt" maxlength="6" value="" data-validate="required:请填写邮政编码,zipcode:请输入邮政编码" placeholder="请输入邮编">
                                            </div>
                                        </div><div class="form-group" id="f_1485165335919">
                                            <div class="label">
                                                <label for="f_address_txt">
                                                    常用地址
                                                </label>
                                            </div>
                                            <div class="field">
                                                <textarea type="text" class="input" id="f_address_txt" name="f_address_txt" maxlength="500" value="" data-validate="" placeholder="请输入常用地址"></textarea>
                                            </div>
                                        </div><div class="form-group" id="f_1485165337502">
                                            <div class="label">
                                                <label for="f_url_txt">
                                                    个人主页
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_url_txt" name="f_url_txt" maxlength="50" value="" data-validate="required:请填写网址,zipcode:请输入网址，以http开头" placeholder="请输入网址">
                                            </div>
                                        </div><div class="form-group" id="f_1485165341402">
                                            <div class="label">
                                                <label for="f_ip_txt">
                                                    登录IP
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_ip_txt" name="f_ip_txt" maxlength="50" value="" data-validate="required:请填写IP,ip:请输入IP地址，如：192.168.1.1" placeholder="请输入IP地址">
                                            </div>
                                        </div><div class="form-group" id="f_1485165344767">
                                            <div class="label">
                                                <label for="f_work">
                                                    工作
                                                </label>
                                            </div>
                                            <div class="field">
                                                <div class="button-group radio">
                                                    <label class="button active">
                                                        <input id="f_work1" name="f_work" value="yes" checked="checked" type="radio" data-validate="required:请选择,length#>=1:至少选择1项"><span class="icon icon-check"></span> 有
                                                    </label>
                                                    <label class="button">
                                                        <input id="f_work0" name="f_work" value="no" type="radio" data-validate="required:请选择,length#>=1:至少选择1项"><span class="icon icon-times"></span> 无
                                                    </label>
                                                </div>
                                            </div>
                                        </div><div class="form-group" id="f_1485165345615">
                                            <div class="label">
                                                <label for="f_class">
                                                    学历
                                                </label>
                                            </div>
                                            <div class="field">
                                                <select class="input" id="f_class" name="f_class" data-validate="required:请选择,length#>=1:至少选择1项">
                                                    <option>大专</option>
                                                    <option>中专</option>
                                                    <option>本科</option>
                                                </select>
                                            </div>
                                        </div><div class="form-group" id="f_1485165353144">
                                            <div class="label">
                                                <label for="f_currency_txt">
                                                    月收入
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_currency_txt" name="f_currency_txt" maxlength="10" value="" data-validate="required:请填写月收入,currency:请输入月收入，1到99岁,length#<10:字数在0-10个" placeholder="输入月收入">
                                            </div>
                                        </div><div class="form-group" id="f_1485165355918">
                                            <div class="label">
                                                <label for="f_datetime_txt">
                                                    注册时间
                                                </label>
                                            </div>
                                            <div class="field">
                                                <input type="text" class="input" id="f_datetime_txt" name="f_datetime_txt" maxlength="2" value="" data-validate="required:请填选择日期时间,datetime:请输入日期时间，如：2015-05-06 00:00:00" placeholder="选择日期时间">
                                            </div>
                                        </div><div class="form-group" id="f_1485165360492">
                                            <div class="label">
                                                <label for="passcode">
                                                    验证码
                                                </label>
                                            </div>
                                            <div class="field">
                                                <div class="button-group">
                                                    <input type="text" class="input float-left" name="passcode" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" style="width: 65%;">
                                                    <img src="http://www.pintuer.com/demo/pintuer2/images/passcode.jpg" width="80" height="32" class="passcode">
                                                </div>
                                            <div class="input-help"><ul><li>请填写右侧的验证码</li></ul></div></div>
                                        </div><div class="form-group" id="f_1485165364942">
                                            <button class="button bg-yellow form-reset type=" reset="" "="">
                                                重设
                                            </button>
                                        </div><div class="form-group" id="f_1485165365614">
                                            <div class="alert alert-red">
                                                <span class="close rotate-hover"></span><strong>操作失败</strong>
                                                <p>
                                                    请重新操作。
                                                </p>
                                                <button class="button bg-red">
                                                    确认
                                                </button>
                                                <button class="button bg-yellow form-reset" type="reset">
                                                    重设
                                                </button>
                                            </div>
                                        </div><div class="form-group" id="f_1485165366998">
                                            <div class="alert alert-yellow">
                                                <span class="close rotate-hover"></span><strong>注意：</strong>请按照要求填写内容。
                                            </div>
                                        </div><div class="form-group" id="f_1485165367670">
                                            <div class="alert alert-blue">
                                                <span class="close rotate-hover"></span><strong>提示：</strong>请按照要求填写内容。
                                            </div>
                                        </div><div class="form-group" id="f_1485165368271">
                                            <div class="alert alert-green">
                                                <span class="close rotate-hover"></span><strong>恭喜：</strong>操作成功。
                                            </div>
                                        </div></form>

onxs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
NodeJS Express博客项目实战 之 轮播图管理
weixin_30569033的博客
08-28 711
轮播图管理添加功能 后台轮播图管理的位置： 因此需在此处加一个路由的跳转： 在视图views中后台的index.html <h2><span class="icon-user"></span>系统管理</h2> <ul > <li><a href="/admin/slid...
Data Validation数据验证(mongoose)
m0_61388464的博客
09-02 1496
Data Validation数据验证(mongoose)
jQuery Validate 1.1.2
siyuan_zhu的专栏
10-29 175
1.简介 JQuery-validate是基于JQuery的一个JS校验框架。 其中1.1.2依赖与JQuery1.7+ 2.使用 1）input组件中通过属性来指定校验类型 --简单校验类型 data-required：必填，支持text，radio，checkbox，select等所有的组件 data-pattern：基于正则表达式的校验 data-trim：校验时是否去除...
前后端综合案例
m0_58680865的博客
07-28 565
前后端综合案例分析（增删改查） 一、User表 （一）查询 1.在js文件夹中创建user.js文件，在user.html文件中导入axios，vue框架和user.js文件 <script src="/js/vue.js"></script> <script src="/js/axios.min.js"></script> <script src="/js/user.js"></script> 注意：在路径前面要加"/",斜杠代表的
jQuery validate验证插件使用详解
韩帅的博客
02-10 3420
Validate验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。 Description 浏览器支持：IE7+ 、Chrome、Firefox、Safari、Mobile Browser jQuery版本：1.7.0+ Usage 载入jQuery、validate
js实现表单验证-完整代码
qq_180494790的博客
10-26 4149
jq 封装js代码可以简化代码繁琐，这里我没有用 html5新增特性，纯采用 js 来一步步实现
js 常用正则表达式表单验证代码
12-07
正则表达式使用详解 简介 简单的说，正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下：测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个...
JS表单验证的代码(常用)
10-22
最近没有项目做，有点空余时间，小编把日常比较常用的js表单验证代码整理分享到脚本之家平台，供大家学习，需要的朋友参考下吧
js会员注册表单验证代码
04-25
js会员注册表单验证代码是一款可以自定义验证用户名邮箱密码等表单验证代码。
JavaScript常用的正则表达式表单验证代码
01-21
常用的正则表达式如下： 代码如下: “^-?[1-9]\\d*$”, //整数 “^[1-9]\\d*$”, //正整数 “^-[1-9]\\d*$”, //负整数 “^([+-]?)\\d*\\.?\\d+$”, //数字 “^[1-9]\\d*|0$”, //正数（正整数 + 0） “^-[1-9]\\d*|...
javascript实现自动填写表单实例简析
10-23
主要介绍了javascript实现自动填写表单的方法,以一个简单实例形式分析了JavaScript结合浏览器设置实现自动保存表单的相关技巧,需要的朋友可以参考下
泛微oa流程L流程表单常用js大全
01-10
泛微oa流程L流程表单常用js，主表、明细表、根据主表字段显示或隐藏明细表指定列、验证大小、如何实现登录名记住上次登录的登录名、如何给单元格添加链接【例如：获取快递单号】、复选框必须选择一个方可提交
简单的js快速预约表单信息提交代码.zip
07-05
js预约表单留言表单代码。
JavaScript 表单
笔记
02-03 1962
在实际工作中，JavaScript 表单常常需要结合 JavaScript 验证 API，以确保用户提交的数据是正确的。例如，在表单提交前，我们可以通过 JavaScript 对用户名、邮箱、密码等字段进行验证，以确保数据的准确性。在实际工作中，JavaScript 表单的应用非常广泛，从简单的验证到复杂的处理，都可以用 JavaScript 实现。如果是，则显示错误消息，并防止表单提交。JavaScript 表单验证 API 可以使用在表单的验证中，来检查用户的输入是否符合预期的格式。
[译] HTML5 data 属性规则使用 jQuery Validate 插件
weixin_34279184的博客
01-30 1176
原文地址: Using the jQuery Validate Plugin with HTML5 Data Attribute Rules The jQuery Validation Plugin 是一个非常非常好用的插件. 和 ASP.NET MVC uses the plugin for client side validation一样好用! 他有个非常好用的 JavaScript AP...
极简代码（一） —— class label 的统计计数
04-01 1592
考虑对 np.array 类型的 label 进行统计计数，以计算当前样本集的信息熵（Shannon Entropy）或者作为其他的计算环节。cnt = [sum(y == c) for c in set(y)] # y == c：得到布尔类型构成的数组如果想要把列别信息也加进去，则返回的数据可以是一个二元 tuple：cnt = [(c, sum(y
HTML5页面使用required后，取消显示“请填写此必填项”
大强博客
05-29 1万+
问题描述：HTML5页面输入框使用required属性后，点取消按钮，页面显示“请填写此必填项”:&lt;input type="text" class="form-control" ng-model="sysCompany.companyName" required&gt;解决办法:增加formnovalidate属性:&lt;button type="submit" class="btn b
js常见表单验证代码
web前端菜鸟工程师
02-02 775
常用JS表单验证实例 1. 长度限制  function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符！"); document.a.b.focus(); return false; } }    2. 只能是汉字  3." 只能是英文  function onlyEng() 
利用js提交form表单的方式
热门推荐
ruolanqingyi的博客
06-27 4万+
第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功&lt;script type="text/javascript"&gt; function validate(obj) { if (confirm("提交表单?")) { alert(obj.value); return true; } els...
JS中function常用事件及代码
最新发布
05-26
下面是一些常用的JS function代码： 1. 打印输出：console.log("Hello World!"); 2. 条件语句： ``` if (a > b) { console.log("a is greater than b"); } else if (a == b) { console.log("a is equal to b");...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值