如何使用Vuelidate minValue maxValue

时间:2019-03-29 08:39:38

标签: javascript vue.js vuelidate

我找不到如何检查大于0的值,因为<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Tuition Hub</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/png" rel="icon" href=""/> <style> #page{ background-image: linear-gradient(to right,#2E74FA 10%,#59C2F9 90%); } #main { border:1px; border-radius:100px; margin:50px 100px; background-color:white; } .image{ border-radius:50px 0px 0px 50px; height:500px; width:50%; float:left; background-color:white; } .form{ border-radius:0px 50px 50px 0px; height:500px; width:50%; float:right; background-color:white; } #input{ width:89%; background-color:#E6E6E6; padding:15px; margin:10px; border: 0px; border-radius:100px; } #select{ width:62%; background-color:#E6E6E6; padding:15px; margin:10px; border: 0px; border-radius:100px; } #check{ font-size:44px; color: blue; } input:focus { background-color:aqua; } .submit{ color:white; background-color:limegreen; padding:10px; border:0px; border-radius:100px; } .img{ height:500px; width:400px; } </style> </head> <body id="page"> <div id="main"> <div class="image"> <img src="\images\tuition_hub.jpg" class="img"> </div> <div class="form"> <form action="Fee_Calculator" method ="get"> <H3><B><center>Get estimated fees</center></B></H3> <input type="text" name="fname" placeholder="Name" id="input" style="margin-top:0px"><br> <input type="email" name="email" placeholder="Email" id="input"><br> Select Your Board : <select name="board" id="select"><br> <option value="ICSE" />ICSE <option value="CBSE"/>CBSE </select><br> Select Your Class : <select name="class" id="select"><br> <option value="2" id="select"/>2 <option value="3" id="select"/>3 <option value="4" id="select"/>4 <option value="5" id="select"/>5 <option value="6" id="select"/>6 <option value="7" id="select"/>7 <option value="8" id="select"/>8 <option value="9" id="select"/>9 </select><br> Select your Subjects :<br> <input type="checkbox" name="Maths" id="check" value="on">Maths <input type="checkbox" name="Science" id="check" value="on">Science<br> <input type="checkbox" name="English" id="check" value="on">English <input type="checkbox" name="Social Studies" id="check" value="on">Social Studies<br> <center><input type="submit" value="CHECK" class="submit"></center> </form> </div> </div> </body> </html> 也接受0,但是如果使用import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * * @author NEGI PC */ @WebServlet(urlPatterns = {"/Fee_Calculator"}) public class Fee_Calculator extends HttpServlet { String name,email,board,sub1,sub2,sub3,sub4; int sclass,fee; /** * Processes requests for both HTTP <code>GET</code> and <code>POST</code> * methods. * * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); try (PrintWriter out = response.getWriter()) { name = request.getParameter("fname"); email = request.getParameter("email"); board = request.getParameter("board"); sub1 = request.getParameter("Maths"); sub2 = request.getParameter("Science"); sub3 = request.getParameter("English"); sub4= request.getParameter("Social Studies"); sclass= Integer.parseInt(request.getParameter("class")); if(board.equals("ICSE")){ switch(sclass){ case 2 : if(sub1.equals("on")){ fee+=200; } if(sub2.equals("on")){ fee+=200; } if(sub3.equals("on")){ fee+=200; } if(sub4.equals("on")){ fee+=200; } break; case 3 : if(sub1.equals("on")){ fee+=250; } if(sub2.equals("on")){ fee+=250; } if(sub3.equals("on")){ fee+=250; } if(sub4.equals("on")){ fee+=250; } break; case 4 : if(sub1.equals("on")){ fee+=250; } if(sub2.equals("on")){ fee+=250; } if(sub3.equals("on")){ fee+=250; } if(sub4.equals("on")){ fee+=250; } break; case 5 : if(sub1.equals("on")){ fee+=300; } if(sub2.equals("on")){ fee+=300; } if(sub3.equals("on")){ fee+=300; } if(sub4.equals("on")){ fee+=300; } break; case 6 : if(sub1.equals("on")){ fee+=350; } if(sub2.equals("on")){ fee+=350; } if(sub3.equals("on")){ fee+=350; } if(sub4.equals("on")){ fee+=350; } break; case 7 : if(sub1.equals("on")){ fee+=400; } if(sub2.equals("on")){ fee+=400; } if(sub3.equals("on")){ fee+=400; } if(sub4.equals("on")){ fee+=400; } break; case 8 : if(sub1.equals("on")){ fee+=500; } if(sub2.equals("on")){ fee+=450; } if(sub3.equals("on")){ fee+=450; } if(sub4.equals("on")){ fee+=450; } break; case 9 : if(sub1.equals("on")){ fee+=500; } if(sub2.equals("on")){ fee+=450; } if(sub3.equals("on")){ fee+=450; } if(sub4.equals("on")){ fee+=450; } break; default: out.println("WRONG INPUT !!!"); } } else{ //For option CBSE , Not created yet!! } out.println("<h2>Your Estimated fees => Rs."+fee); out.println("<br> For more Details ,Consult the Tutor!!!</h2>"); fee=0; } } // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code."> /** * Handles the HTTP <code>GET</code> method. * * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Handles the HTTP <code>POST</code> method. * * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Returns a short description of the servlet. * * @return a String containing servlet description */ @Override public String getServletInfo() { return "Short description"; }// </editor-fold> } ,那么0和1之间的任何十进制也将不被接受。

我也不知道为什么我不能使用下面的数据/为maxValue计算的变量。如果我使用minValue(0),它可以工作,但是我需要它是动态的。

minValue(1)

1 个答案:

答案 0 :(得分:1)

我相信在这种情况下,您的validations应该是一个函数,而不是对象。

validations() {
  return {
    form: {
      amount: { maxValue: maxValue(this.maxValue) }
    }
  }
}

您可以在此处找到相关示例:https://vuelidate.netlify.com/#sub-dynamic-parameters

-编辑-

关于大于0的值,复制自我的评论:

我不确定,但是似乎没有针对这种情况的内置验证器。您可以编写自己的验证器,看起来或多或少像这样:

const greaterThanZero = (value) => value > 0

validations() {
  form: {
    amount: {
      maxValue: greaterThanZero
    }
  } 
}

或者您可以使用minValue(0.00000001)作为解决方法自定义验证器也可以采用参数,因此您可以编写比将采用动态值的自定义验证器大的代码(相关文档:https://vuelidate.netlify.com/#sub-extra-parameters

相关问题