0 38 2024-06-13 18:00:03
收藏
<form id="myForm">
<input type="text" name="phone" placeholder="手机号码">
<input type="email" name="email" placeholder="邮箱地址">
<input type="text" name="title" placeholder="标题">
<textarea name="message" placeholder="留言"></textarea>
<button type="button" onclick="validateForm()">提交</button>
</form>
function validateForm() {
var form = document.getElementById('myForm');
var phoneInput = form.elements['phone'];
var emailInput = form.elements['email'];
var titleInput = form.elements['title'];
var messageTextarea = form.elements['message'];
// 检查手机号码(简单示例,仅检查是否为11位数字)
function isValidPhone(phone) {
var regex = /^\d{11}$/; // 假设手机号码为11位数字
return regex.test(phone);
}
// 检查邮箱地址
function isValidEmail(email) {
var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 简单的邮箱验证正则表达式
return regex.test(email);
}
// 检查标题和留言是否为空
function isNotEmpty(value) {
return value.trim() !== '';
}
// 验证手机号码
if (!isValidPhone(phoneInput.value)) {
alert('手机号码格式不正确!');
return false; // 验证失败,停止后续验证
}
// 验证邮箱地址
if (!isValidEmail(emailInput.value)) {
alert('邮箱地址格式不正确!');
return false; // 验证失败,停止后续验证
}
// 验证标题是否为空
if (!isNotEmpty(titleInput.value)) {
alert('标题不能为空!');
return false; // 验证失败,停止后续验证
}
// 验证留言是否为空
if (!isNotEmpty(messageTextarea.value)) {
alert('留言不能为空!');
return false; // 验证失败,停止后续验证
}
// 验证其他独立字段
if(obj.count!=null)
{
if(obj.count.value=='')
{
document.getElementsByClassName("warn-count")[0].style.display = "block";
return false;
}
}
// 所有验证都通过,可以提交表单或执行其他操作
alert('表单验证通过!');
// 例如:form.submit(); // 如果要提交表单到服务器,取消注释这行代码
return true;
}
<form id="myForm" onsubmit="return validateForm(event)">
<input type="text" name="phone" placeholder="手机号码">
<input type="email" name="email" placeholder="邮箱地址">
<input type="text" name="title" placeholder="标题">
<textarea name="message" placeholder="留言"></textarea>
<button type="submit">提交</button>
</form>
function validateForm() {
event.preventDefault();
var form = document.getElementById('myForm');
var phoneInput = form.elements['phone'];
var emailInput = form.elements['email'];
var titleInput = form.elements['title'];
var messageTextarea = form.elements['message'];
// 检查手机号码(简单示例,仅检查是否为11位数字)
function isValidPhone(phone) {
var regex = /^\d{11}$/; // 假设手机号码为11位数字
return regex.test(phone);
}
// 检查邮箱地址
function isValidEmail(email) {
var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 简单的邮箱验证正则表达式
return regex.test(email);
}
// 检查标题和留言是否为空
function isNotEmpty(value) {
return value.trim() !== '';
}
// 验证手机号码
if (!isValidPhone(phoneInput.value)) {
alert('手机号码格式不正确!');
return false; // 验证失败,停止后续验证
}
// 验证邮箱地址
if (!isValidEmail(emailInput.value)) {
alert('邮箱地址格式不正确!');
return false; // 验证失败,停止后续验证
}
// 验证标题是否为空
if (!isNotEmpty(titleInput.value)) {
alert('标题不能为空!');
return false; // 验证失败,停止后续验证
}
// 验证留言是否为空
if (!isNotEmpty(messageTextarea.value)) {
alert('留言不能为空!');
return false; // 验证失败,停止后续验证
}
// 验证其他独立字段
if(obj.count!=null)
{
if(obj.count.value=='')
{
document.getElementsByClassName("warn-count")[0].style.display = "block";
return false;
}
}
if (isValidPhone(phoneInput.value) &&
isValidEmail(emailInput.value) &&
isNotEmpty(titleInput.value) &&
isNotEmpty(messageTextarea.value)) {
form.submit();
} else {
alert('表单验证失败,请检查输入!');
}
}
本文地址:https://xzo.com.cn/develop/js/1271.html
如果您认可我们的分享,有意与我们合作开展帝国cms网站建设与开发业务或插件定制,请联系右侧在线客服。我们能给您的,就是高质量的模板与售后。
标注了信息来源为下载鸥的文章皆为原创,如果是转载的优质文章,我们也都标注了出处。如果您喜欢我们的文章,请按照下载鸥所标注的文章出处进行标注,谢谢您的配合。
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。
在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...
什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...
在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...
在通过jQuery做数据交互时我们可能存在这样的需求:通过点击按钮清空ul里的li...
很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...
通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...
通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...
网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...
帝国cms 对接纳米数据(www.nami.com)接口,本接口主要接收、整理足球比赛实时数...
本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...
使用帝国cms的企业用户、新闻资讯类站点的用户很多,此类站点很多时候需要有...
百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...
采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...
许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...
帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...
用户体验是我们的需求,百度蜘蛛的认可更是我们的需求。毕竟,没有收录排名,何来...