js正则验证,以及验证码的实现

本文介绍了JavaScript中使用正则表达式进行表单验证的方法,包括失去焦点时的验证、表单提交时的逐项验证以及表单提交时的自动正则验证。同时展示了如何在验证失败时显示错误信息,并提供了点击按钮后的确认对话框操作。还涵盖了文件上传时的图片预览功能。
摘要由CSDN通过智能技术生成


验证:失去焦点弹出对话框value===========================================================


<input type="text" class="inputh" value="" id="name" name="name" οnblur="f_check(this)"/>
----------------------------
<script>
   function f_check(obj){
        var reg=/^[\w]{2,}$/;
        if(!obj.value.match(reg)){
              alert("用户名格式不正确!");
              obj.focus();
        }
   }
</script>


表单提交时逐项验证===========================================================
<form id="loginForm" method="post" name="loginform" action="UserServlet?action=login" onsubmit = "return check()">
<input class="text" type="text" id="userId" name="username" />
<input class="text" type="password" id="password" name="password" />
<div id="error"></div>
<input type="submit" name="submit" value="立即登录" />
</form>
----------------------------
<script type="text/javascript">
function check(){
   var username=document.getElementById("username");
   var password=document.getElementById("password");
   var error   =document.getElementById("error");
   if(username.value==""){
   error.innerHTML="<font color=\"red\">用户名不能为空!</font>";
   username.focus();
   return false;
   }else if(password.value==""){
      error.innerHTML="<font color=\"red\">密码不能为空!</font>";
      password.focus();
      return false;
     }
   return true;
}
</script>








表单提交自动正则验证各项,同时锁定任务栏document.getElementById=====================
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html> <html> <head> <title>Vue Login Form with Regex Validation and Captcha</title> <!-- Vue.js framework --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Bootstrap CSS framework --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Captcha CSS --> <style type="text/css"> #captcha { font-size: 24px; font-weight: bold; color: #337ab7; cursor: pointer; } </style> </head> <body> <div id="app" class="container"> <h1>Vue Login Form with Regex Validation and Captcha</h1> <!-- Login form --> <form class="form-horizontal" @submit.prevent="submitForm"> <div class="form-group" :class="{'has-error':!usernameValid}"> <label for="username" class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username" placeholder="Username" v-model.trim="username" @blur="checkUsername" required> <span class="help-block" v-if="!usernameValid">Username must contain only letters, numbers and underscores.</span> </div> </div> <div class="form-group" :class="{'has-error':!passwordValid}"> <label for="password" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password" v-model.trim="password" @blur="checkPassword" required> <span class="help-block" v-if="!passwordValid">Password must be at least 8 characters long and contain at least one lowercase letter, one uppercase letter, one number and one special character.</span> </div> </div> <div class="form-group" :class="{'has-error':captchaError}"> <label class="col-sm-2 control-label">Captcha</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="Enter Captcha" v-model.trim="captcha" required> <span class="help-block" v-if="captchaError">Invalid Captcha. Please try again.</span> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary" :disabled="submitDisabled">Submit</button> </div> </div> </form> <!-- Captcha --> <div id="captcha" @click="generateCaptcha">{{captcha}}</div> </div> <!-- Vue.js script --> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { username: '', password: '', captcha: '', captchaError: false, usernameValid: true, passwordValid: true }, methods: { // Submit login form submitForm() { if (this.captcha === this.generatedCaptcha) { // Do login action here alert('Login successful!'); } else { this.captchaError = true; } }, // Check if username is valid checkUsername() { var regex = /^[a-zA-Z0-9_]+$/; this.usernameValid = regex.test(this.username); }, // Check if password is valid checkPassword() { var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; this.passwordValid = regex.test(this.password); }, // Generate captcha generateCaptcha() { var length = 6; var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; var result = ''; for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]; this.generatedCaptcha = result; this.captcha = ''; this.captchaError = false; } }, computed: { // Check if submit button is disabled submitDisabled() { return !this.usernameValid || !this.passwordValid || !this.captcha; } }, watch: { // On change of captcha, set captcha error to false captcha() { this.captchaError = false; } }, mounted() { // Generate captcha on page load this.generateCaptcha(); } }) </script> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值