Javascript 修改 input 验证提示

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82876619 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82876619

HTML5 为 form 中的 input 提供了一系列的验证提示,通过 Javascript 可以对验证提示的内容进行自定义

更多精彩

定义一个 input 标签,并添加 required 属性

<input type="text" name="username" required>

定义一个方法,使用 setCustomValidity() 方法添加自定义的验证提示内容

<script type="text/javascript">
function checkInput(input) {
    if (input.value.length < 20) {
        input.setCustomValidity("输入内容不得少于20个字符");
    } else {
        input.setCustomValidity("");
    }
}
</script>

在 input 标签中添加 invalid 属性,指定调用前续方法,并传入当前输入框

<input type="text" name="username" oninvalid="checkInput(this)" required>
目录
相关文章
|
9月前
|
JSON 算法 安全
Nest.js JWT 验证授权管理
Nest.js JWT 验证授权管理
175 3
Nest.js JWT 验证授权管理
|
9月前
egg.js 24.18参数验证
egg.js 24.18参数验证
89 0
egg.js 24.18参数验证
|
14天前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
51 10
|
5月前
|
移动开发 JavaScript 前端开发
JavaScript:验证输入
【9月更文挑战第02天】
56 6
|
8月前
|
JavaScript 前端开发
JS如何配合input框实现模糊搜索
JS如何配合input框实现模糊搜索
193 2
|
5月前
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
47 2
|
6月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
75 1
|
6月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
174 1
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
Vue.js 表单处理技巧大揭秘!v-model 与自定义验证综合运用,打造高效表单处理体验!
【8月更文挑战第31天】Vue.js 是一款备受欢迎的前端框架,其表单处理功能强大且灵活。v-model 指令可实现双向数据绑定,简化表单元素值与 Vue 实例数据的同步过程;结合自定义验证规则,则能确保用户输入数据符合特定要求。无论是简单的单字段校验还是复杂的多字段验证,Vue.js 均提供了简洁有效的解决方案,有效提升了表单处理效率及用户体验。通过综合运用 v-model 和自定义验证,开发者能够实时反馈错误信息并控制表单状态,从而增强应用的交互性与可靠性。
82 0
|
6月前
|
存储 JavaScript 前端开发
js登陆验证
js登陆验证
45 0