原生js检查标题、留言不为空，手机、邮箱合规

button为普通按钮时

html代码

<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>

js代码

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;  
}

button为submit时

html代码

<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>  

js代码

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('表单验证失败，请检查输入！');  
    }  
}